手机web适配技巧

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

在网页的<head>中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。

其中:

width=device-width :表示宽度是设备屏幕的宽度

initial-scale=1.0:表示初始的缩放比例

minimum-scale=0.5:表示最小的缩放比例

maximum-scale=2.0:表示最大的缩放比例

user-scalable=yes:表示用户是否可以调整缩放比例

如果是想要一打开网页,则自动以原始比例显示,并且不允许用户修改的话,则是:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

这样子写后,就可以把一些页头横幅等的图片的宽度都设置成style="width:100%",整个页面在设备上看起来就是全屏的了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 刚开始做移动端web开发的同学应该都碰到过页面适配问题,为什么我在开发手机上调试好的页面在其他手机会有这样或那样的...
    留七七阅读 19,608评论 5 80
  • 开发移动网页时,你一定会遇到下面这段代码: 在网页的 中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。其...
    gzgogo阅读 6,723评论 4 16
  • 原文地址 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewp...
    matthewm阅读 5,416评论 0 4
  • 2017年9月14日 星期四 晴 张荣轩妈妈 亲子日记第11篇 经过最近一段时间的锻炼,我觉得儿子成长了...
    爱意暖人心阅读 1,449评论 0 0
  • 春之将尽夕不解意 夏之欲至夕已淡然 秋之尚远夕恐其霜 冬之僚栗夕畏之寒
    静心斋主阅读 1,053评论 0 0