【外行学IT】手机网页自适应之rem和viewport

时间 2019-11-12

标签外行学IT 手机网页自适应 rem viewport 栏目 HTML 繁體版

原文原文链接

在写手机网页时，对于像素的问题会很是困惑，初学者不少时候会由于那么一个小点的问题解决不了，或者没法理解透彻就放弃了学习。html

我在学习写手机网页时也困惑了许久，出现过下面的问题：算法

图片素材按照640px*330px像素设计，放入img，而且img设置了铺满全屏style：chrome

.img{
    width:100%;
    height:16.5rem;
]

PS:我将html设置了浏览器

html{
    font-size:20px;    
}

因此按照rem的算法，img的高度应该是330px/20px=16.5rem（rem怎么用？下片文章会用咱们外行的白话来讲明）学习

这时候在chrome谷歌浏览器中调试效果，发现图片宽度变成了980px，而后各类算rem算不对，实在没想明白，为啥本身的图片明明是640px宽，怎么到了浏览器里被放大到980了，后来翻阅了网上各大神的文章，发现移动设备上的浏览器都会把本身默认的viewport设为980px或1024px网站

因此这个时候须要在<head>里面加入下面的一段代码：spa

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

该meta标签的做用是让当前viewport的宽度等于设备的宽度，同时不容许用户手动缩放。也许允不容许用户缩放不一样的网站有不一样的要求，但让viewport的宽度等于设备的宽度，这个应该是你们都想要的效果，若是你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。scala

这个name为viewport的meta标签到底有哪些东西呢，又都有什么做用呢？设计

meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证实这个东西仍是很是有用的。调试

在苹果的规范中，meta viewport 有6个属性，以下：

width	设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，能够带小数
minimum-scale	容许用户的最小缩放值，为一个数字，能够带小数
maximum-scale	容许用户的最大缩放值，为一个数字，能够带小数
height	设置layout viewport 的高度，这个属性对咱们并不重要，不多使用
user-scalable	是否容许用户进行缩放，值为"no"或"yes", no 表明不容许，yes表明容许

这些属性能够同时使用，也能够单独使用或混合使用，多个属性同时使用时用逗号隔开就好了。