查看: 503|回复: 2

[html] 让图片与字体自动适应手机屏幕大小

[复制链接]
  • TA的每日心情
    开心
    2015-11-18 11:59
  • 签到天数: 68 天

    连续签到: 1 天

    [LV.6]常住居民II

    发表于 2016-8-3 16:00:11 | 显示全部楼层 |阅读模式
    本帖最后由 exo 于 2016-8-4 12:02 编辑

    以下需注意:红色部分是比较关键的地方,蓝色部分可以不要。主要还是对于css样式需要调整好,就可以让图片自动适应屏幕的大小了!

    • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    • <meta content="yes" name="apple-mobile-web-app-capable">
    • <meta content="black" name="apple-mobile-web-app-status-bar-style">
    • <meta content="telephone=no" name="format-detection">
    • <!--字体随着屏幕的变大或缩小自动改变 下面这一行非常重要-->
    • <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    • <style>
    •         #article img{margin:0 auto;}
    •         span{font-size:16px;color:red;}
    •         img{width:100%;}
    • </style>
    • <div id=article>
    • <span>我的图片库</span><br>
    •         <img src="images/slide1.png" />
    •         <img src="images/slide1.png" />
    • </div>
    • <script src="js/jquery.js"></script>
    • <script type="text/javascript" >
    • //缩放图片到合适大小
    • function ResizeImages()
    • {
    •    var myimg,oldwidth,oldheight;
    •    var maxwidth=550;
    •    var maxheight=880
    •    var imgs = document.getElementById('article').getElementsByTagName('img');   //如果你定义的id不是article,请修改此处
    •    for(i=0;i<imgs.length;i++){
    •      myimg = imgs;
    •      if(myimg.width > myimg.height)
    •      {
    •          if(myimg.width > maxwidth)
    •          {
    •             oldwidth = myimg.width;
    •             myimg.height = myimg.height * (maxwidth/oldwidth);
    •             myimg.width = maxwidth;
    •          }
    •      }else{
    •          if(myimg.height > maxheight)
    •          {
    •             oldheight = myimg.height;
    •             myimg.width = myimg.width * (maxheight/oldheight);
    •             myimg.height = maxheight;
    •          }
    •      }
    •    }
    • }
    • //缩放图片到合适大小
    • ResizeImages();
    • </script>

  • TA的每日心情

    2017-10-18 14:36
  • 签到天数: 101 天

    连续签到: 1 天

    [LV.6]常住居民II

    发表于 2016-8-23 18:22:39 | 显示全部楼层
    直接用样式来定义图片大小不好么,为什么还需要用JS来固定宽跟高啊
    有什么说道吗
  • TA的每日心情
    开心
    2015-11-18 11:59
  • 签到天数: 68 天

    连续签到: 1 天

    [LV.6]常住居民II

     楼主| 发表于 2016-8-30 17:11:49 | 显示全部楼层
    一个是自动放大缩小。一个是根据实际的宽高进行缩放,不让图片发生变形,但是在手机里测试貌似也没看出来什么效果啦
    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    站长推荐上一条 /1 下一条