移动端开发-viewport

最新推荐文章于 2025-07-25 15:17:53 发布

weixin_33916256

最新推荐文章于 2025-07-25 15:17:53 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hanguozhi/p/7389287.html

本文详细介绍了移动设备上viewport的概念及其与物理像素的关系，解释了如何通过meta标签设置viewport宽度等于设备真实物理像素宽度的方法，从而解决网页在不同设备上的适配问题。

1.viewport

viewport 即设备屏幕上显示网页的区域。因为移动设备屏幕比较小，为了能让移动设备能够显示更多内容，默认设置的viewport 并不是屏幕真是像素点的宽度，一般为980px 宽或者是其他值（不同的设备可能不一样），但带来的后果就是当网页过宽浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小。

2.像素和物理像素

说到像素和物理像素，就得说一下DPR（devicePixelRatio）这个词了，DPR表示屏幕 “显示像素” 与 “物理像素” 的比值，一般电脑屏幕的 “独立像素” 等于 “物理像素”。

对于移动端来说，不同的设备 DPR也有所不同，例如同样是 360个物理像素宽度的屏幕，有可能能够显示的宽度为 720px 或者960px ,对应的dpr分别为720/360 和960/360。

3.使viewport === 设备物理像素宽度

使用meta标签锁定视口，强制viewport 等于设备宽度，这样一来，1px 显示出来就是1px 。

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

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

在html的head标签内添加这个meta标签后，就可以强制让viewport 的width 等于设备宽度了。

参数意义如下

width=device-width ： 强制让viewport 的width 等于设备宽度

initial-scale=1.0  ： 页面初始缩放值 ，1.0 即没有缩放

maximum-scale=1.0  ： 页面最大缩放值

user-scalable=no   : 设置页面是否可以被用户缩放，yes 是可以 ，no 是不可以 


（完）

转载于:https://www.cnblogs.com/hanguozhi/p/7389287.html