如何调整手机屏幕大小以适合我的内容

我在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;

}

帮助！

来源

2012-02-24 Anele

+1谢谢！单独你的问题帮助我在Android屏幕上适合我的应用程序:-) – 2013-02-21 09:56:11

我很高兴能够通过提问来提供帮助。但是，现在我依靠媒体查询以及使用[安迪泰勒项目之一]（http://cssgrid.net/） – Anele 2013-03-06 06:24:20

您可以将视口宽度设置为352，但我强烈建议您改变设计页面的灵活性，即不要使用绝对像素值。而是使用百分比宽度，并尝试调整浏览器的大小（如果您无法访问要测试的实际设备），以确保您的元素能够以各种宽度正确匹配。

视口标签只适用于某些设备，固定像素大小通常是移动网络禁忌。

来源

2012-02-27 22:49:33 Ben

是的谢谢你的本。我改变了我的固定宽度。我正在实施[Grid System Fluid down to mobile]（http://cssgrid.net/） – Anele 2012-03-22 08:33:11

如何调整手机屏幕大小以适合我的内容

回答

相关问题