如何检测移动设备的屏幕分辨率?

问题描述:

我是新来的移动web应用程序开发,我写了一个小应用程序在jqueryMobile &聊天室,但我有屏幕高度的问题,当我测试我的应用程序在歌剧模拟器然后为大屏幕尺寸我的应用程序看起来很小大小,有没有办法检测到&调整高度&宽度,所以它看起来像一个本机应用程序&填充整个屏幕。如何检测移动设备的屏幕分辨率?

enter image description here

enter image description here

+0

你可以包含一个截图来说明问题吗? – codaniel 2012-04-07 18:44:52

可以读取CSS技巧,使CSS的目标屏幕尺寸

http://css-tricks.com/css-media-queries/

不知道你的CSS标记的样子尝试添加以下meta标签:

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

这将确保你的页面开始在正确的比例(并禁止双指缩放)

尝试添加下面的代码片段:

<meta name="viewport" content="width=device-width"> 

从你说应该适合你的需求是什么。

您可以在这里进一步了解https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

视meta标签的详细信息也有可能会考虑一些其他的meta标签。

<meta name="HandheldFriendly" content="True"> 

<meta name="MobileOptimized" content="320"/> 

大部分我从探索html5移动样板中学到了。对于任何移动应用程序来说,这是一个坚实的起点。如果你还没有检查出来,我相信它会帮助你很多http://html5boilerplate.com/mobile

+0

我已经尝试了所有这些东西!但不工作,有没有办法让用户不能上下拖拽(将应用程序窗口保持在所需的高度) – Desire 2012-04-07 18:26:21

+0

是否要禁用缩放?当然,你并不是说你想让用户不再滚动。 – codaniel 2012-04-07 18:35:32