我一直在尝试确定视口 - 以及其中的内容 - 如何受到用于使用WebView或本机浏览器绘制内容的视口元标记的影响.
我遇到的是一些明显的不一致.我创建了一个小页面(见下文),其中包含一个图像和一些用于显示视口大小的javascript,因此我可以直观地看到图像的缩放以及获取确切的数字.
首先,一些观察:
设备#1:物理屏幕为1024x600,运行Android 2.2.
我有一个网页,我试图在我的Android设备上显示(从项目的资产目录加载)使用PhoneGap(使用普通的WebView设置为"appview"),但webview完全忽略以下内容:
<meta name = "viewport" content = "user-scalable=no,width=device-width" />
无论我在这一行中设置什么(我已经尝试明确设置缩放,设置宽度/高度,以像素为单位等),设备完全忽略它并使网站非常小并锚定在左上角的屏幕.我可以使用捏合手势放大(即使我明确禁用了上面的html代码中的缩放),但我希望页面可以放大以正确适应设备的负载.
这是有趣的一点......如果我在我的网络服务器上放置完全相同的网站并使用我的测试设备上的默认浏览器导航到它,页面正确加载(缩放到设备的正确大小).
请帮忙.
谢谢.
EDIT1:
我目前的设置是:
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,target-densitydpi=device-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
这也完全被忽略了.
EDIT2:
这里有点有趣......
<meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, user-scalable=no" />
以上行在模拟器中将页面缩放到2x,但在我的设备上没有任何变化(Samsung Epic运行2.2.1).尽管如此,即使是2倍,页面也没有缩放到模拟器的宽度......我必须将其设置为"initial-scale = 2.5".