Question

我正在创建一个移动网页，并在处理各种屏幕尺寸时苦苦挣扎，基本上我想让我的页面成为实际屏幕的宽度，而不是浏览器。

由于移动浏览器的工作方式，当设置以下元标记时，大多数浏览器的默认“宽度”为320像素：

<meta name="viewport" content="width=device-width, initial-scale=1"></meta>

我该怎么做才能使页面成为屏幕的完整分辨率而不是浏览器的“分辨率”？

必须有一些简单的解决方案..

注意：将初始刻度标志设置为2会使我的iphone和Android手机上的页面小于320像素（分别为640和480像素宽）并将其设置为.5使两个设备上的页面宽640像素，但放大了Android设备。它给了iPhone带来了预期的效果..

Answer 1

该列表中缺少的属性为target-densitydpi=device-dpi。

默认情况下，WebView会对网页进行缩放，以便按大小绘制与中密度屏幕上的默认外观匹配。所以在高密度屏幕上应用1.5倍缩放（因为它的像素是在低密度屏幕上缩小和0.75倍缩放（因为它的像素更大）。

和

device-dpi - 使用设备的本机dpi作为目标dpi。默认缩放永远不会发生。

Answer 2

您是否尝试添加最大比例并添加如下所示的densitydpi：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, target-densitydpi=device-dpi">

您可以在此处找到适用于移动浏览器的优秀示例：

https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

但也许这取决于浏览器。