Question

我在使用Adobe Device Central CS3时遇到了一些困难。我正在使用Html和CSS进行移动网站测试我正在使用库中的所有诺基亚手机通过设备中心进行测试。

我使用诺基亚N80在Ps上做了一个moch，这是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";

当我使用低于352像素×416像素的设备观看时，内容会被切断，你必须向侧面滚动。从我读过的博客中可以看出“视口”是为了解决问题，并根据所使用的设备使内容/网站可扩展。

我还应该记下我有一个包装器div，它包含所有内容，并且它具有固定的宽度和高度。

#wrapper {
width:352px;
height:416px;
background:url(../images/Site-Bg_02.png) repeat;

}

帮助！

Answer 1

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

视口标记仅适用于某些设备，而固定像素大小调整通常是禁止移动网络。

如何调整移动屏幕大小以适应我的内容

1 个答案: