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

最新推荐文章于 2023-06-26 00:00:47 发布

有魔力的豆角

最新推荐文章于 2023-06-26 00:00:47 发布

阅读量1.3k

点赞数 2

分类专栏： H5 html 文章标签： H5 html

本文链接：https://blog.csdn.net/culous/article/details/78853371

版权

html 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。

 target-densitydpi

一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

下面是 target-densitydpi 属性的取值范围

width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

所有的缩放值都必须在0.01–10的范围之内。

例子：
(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)

<meta name="viewport" content="width=device-width,user-scalable=no" />

(设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)


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