Question

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

我真的很挣扎这个网站的布局，我希望缩略图的间距相等，边缘的边距相同。

我尝试了几种方法，但遇到了所有方法的问题。

1.我尝试设计固定宽度为960px的网站，并对这个宽度对称地布置缩略图和边距。这在一定程度上有效，但是ipad将浏览器宽度默认为980px，因此边缘的空白区域比我想要的要大。

2.与上述相同，但我也指明：

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

现在所有的东西看起来都应该在ipad上（纵向），它在风景中也不算太糟糕（我认为缩略图会被炸毁，并且有点像素化）。它在桌面上显示正常，但在iphone上无法使用，因为一切都太小了。

3.为了解决上述问题，并按照Apple themselves的建议，我尝试将上述内容换成：

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

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

有人可以建议最好的方法吗，我确实考虑过使用javascript来调整布局，但是不想采取这种方式。

由于

Answer 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标题。这仅用于移动设备的其他用途。 MyCSS：

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}

注意固定宽度分配。

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

1 个答案: