移动设备上 Web 应用程序的布局选项答案

【问题标题】：Layout options for web applications on mobile devices移动设备上 Web 应用程序的布局选项
【发布时间】：2011-12-16 07:47:31
【问题描述】：

我正在编写一个用于移动触摸设备的网络应用程序，首先我专注于 ipad。该应用程序将包含一个缩略图网格，类似于谷歌图像。

我真的在为这个网站的布局而苦恼，我希望缩略图的间距相等，边缘的边距大小相同。

我尝试了几种方法，但都遇到了问题。

1.我尝试将网站设计为 960 像素的固定宽度，并针对此宽度对称地布置缩略图及其边距。这在一定程度上起作用，但 ipad 将浏览器宽度默认为 980 像素，因此边缘的空白区域比我想要的要大。

2.同上，但我也指定了：

<meta name="viewport" content="width=960, user-scalable=no" />

现在一切在 ipad 上看起来都应该（纵向），横向也不错（我认为缩略图被炸毁了，而且有点像素化）。它在桌面上显示正常，但在 iphone 上无法使用，因为一切都太小了。

3.为了解决上述问题，根据苹果themselves 的建议，我尝试将上述内容替换为：

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

有了这个，我得到了一个适用于 iPhone 和 iPad 的合理比例，但问题是我的布局无法获得完美的像素，屏幕左右边缘的空白不相等（因为我我正在处理固定宽度图像的网格，这些图像不适合可用空间的整数次）

谁能建议最好的方法，我确实考虑过使用 javascript 来调整布局，但不想走这条路。

谢谢

【问题讨论】：

标签： css ios html web-applications layout

【解决方案1】：

很好的尝试。我使用它，请参阅我的链接作为示例，但这仅适用于 iPhone，主要是因为 iPad 不同。我建议在以下位置查看 FIXED 布局：

http://www.gorgeouscouture.com/mobile/

http://m.oasis-stores.com/

http://m.asos.com/mt/www.asos.com

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mobile.css" type="text/css" media="all, handheld" />

请注意，我不使用 HTML5 标题。这只是用于移动设备的其他用途。我的CSS：

body{width:320px;margin: 0px auto;min-height:356px;font-family:Georgia, Georgia, Arial, serif;background-repeat:repeat;background-position:50% 50%;text-align:center;background-color:#f4f8f9}
#b{position:relative;margin-left:0px;margin-right:0px;width:auto;height:auto;background:#fff;-moz-box-shadow:0 0 3px 3px #eaeaea;-webkit-box-shadow:0 0 3px 3px #eaeaea;box-shadow:0 0 3px 3px #eaeaea}
#content{position:absolute;width:auto;height:auto;top:25%;background:#fff}

请注意固定宽度分配。

【讨论】：

感谢TheBlackBenzKid的回复，我很好奇你为什么设置width=device-width并给你的页面一个固定的宽度？
我现在修改了。顺便说一下。 user-scalable=0 对我来说在 Windows Phone 7 上不起作用，user-scalable=no 和 user-scalable=yes 有效，1 和 0 无效。我不得不这样做，因为一些手机仍然显示底部滚动。另一种解决方案：jjeffryes.blogspot.com/2010/09/…
我建议使用我上面发送的链接，因为它们是流动的而不是固定的。他们仍然使用 width=device-width 选项 - 但它适合取决于屏幕尺寸的流体。我只做后者，因为我的客户需要的解决方案是非流畅的布局。
只是为了更新 - 这些页面没有流动性。由于流体，这个答案不能真正应用。