设置屏幕的窗口宽度答案

【问题标题】：Make window width of screen设置屏幕的窗口宽度
【发布时间】：2013-01-20 21:03:54
【问题描述】：

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

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

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

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

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

注意：将 initial-scale 标志设置为 2 会使我的 iphone 和 android 手机上的页面小于 320 像素（分别为 640 和 480 像素宽），并将其设置为 0.5 会使两个设备上的页面宽度为 640 像素，但放大了android设备。它在 iphone 上产生了预期的效果..

我的页面：mmhudson.com/index1.html

【问题讨论】：

将target-densitydpi=device-dpi 添加到内容列表有帮助吗？
@cimmanon 您的解决方案有效。请提供并回答，我会接受

标签： android html ios css meta

【解决方案1】：

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

http://developer.android.com/reference/android/webkit/WebView.html

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

和

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

【讨论】：

【解决方案2】：

您是否尝试过像这样添加 maximum-scale 和 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

但也许这取决于浏览器。

【讨论】：