如何调整手机屏幕大小以适合我的内容
问题描述:
我在Adobe Device Central CS3上遇到了一些困难。我正在使用Html和CSS进行移动网站测试,我正在通过设备中心使用库中的所有诺基亚手机进行测试。如何调整手机屏幕大小以适合我的内容
我做了MOCH了诗篇使用诺基亚N80是352px由416px(我的Photoshop文档)
在我的Meta标签,我把下面的代码:
<meta name="viewport" content="width=device-width" />
<!--The iPhone will auto fit the screen -->
<meta name="viewport" content="width=240, height=320, user-scalable=yes, initial-scale=0.7, maximum-scale=5.0, minimum-scale=1.0" />
<!-- adjusting Web pages to screens and adjusting Web page content size -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<script type="text/javascript">
if((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1))
document.location = "http://iphone.mywebsite.com/index.html";
当我正在使用小于352px的设备查看416px内容被切碎,并且您必须横向滚动。从我已经读过的把“视口”放在博客上的博客假设解决问题并根据所使用的设备使内容/站点可扩展。
我还应该做一个说明,我有一个包含所有东西的包装div,它具有固定的宽度和高度。
#wrapper {
width:352px;
height:416px;
background:url(../images/Site-Bg_02.png) repeat;
}
帮助!
答
您可以将视口宽度设置为352,但我强烈建议您改变设计页面的灵活性,即不要使用绝对像素值。而是使用百分比宽度,并尝试调整浏览器的大小(如果您无法访问要测试的实际设备),以确保您的元素能够以各种宽度正确匹配。
视口标签只适用于某些设备,固定像素大小通常是移动网络禁忌。
+0
是的谢谢你的本。我改变了我的固定宽度。我正在实施[Grid System Fluid down to mobile](http://cssgrid.net/) – Anele 2012-03-22 08:33:11
+1谢谢!单独你的问题帮助我在Android屏幕上适合我的应用程序:-) – 2013-02-21 09:56:11
我很高兴能够通过提问来提供帮助。但是,现在我依靠媒体查询以及使用[安迪泰勒项目之一](http://cssgrid.net/) – Anele 2013-03-06 06:24:20