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

发布于 2024-12-12 07:21:20 字数 866 浏览 0 评论 0原文

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

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

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

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

2.与上面相同，但我还指定：

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

现在一切在ipad上看起来都应该如此（纵向），横向也不错（我认为缩略图被放大了，并且有点像素化）。它在桌面上显示良好，但在 iPhone 上无法使用，因为一切都太小了。

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

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

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

任何人都可以建议最好的方法吗，我做到了考虑使用javascript来调整布局，但不愿意走这条路。

谢谢

原文

I am writing a web application for use on mobile touch devices, to begin with I am concentrating on the ipad. The application will contain a grid of thumbnail photographs, similar to google images.

I am really struggling with the layout of this site, I want the thumbnails to be equally spaced, with margins of the same size at the edges.

I have tried several methods, but have run into problems with all of them.

1.I tried designing the site with a fixed width of 960px, and laid out the thumbnails and their margins symmetrically for this width. This worked to a degree, but the ipad defaults the browser width to 980px, so the white space at the edges were larger than I would have liked.

2.The same as above, but I also specified:

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

Everything now looks as it should on the ipad (in portrait), it's not too bad in landscape (I think the thumbnails are blown up, and a little pixelated). It displays fine on the desktop, but is unusable on the iphone as everything is too small.

3.To get round the above problem, and as suggested by apple themselves I tried swapping the above with:

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

With this, I get a sensible scale for both iPhone and iPad, but the problem is I can't get pixel perfection on my layouts, the white space at the left and right edges of the screen are not equal (because I am dealing with a grid of fixed width images, that do not fit a whole number of times into the space available)

Can anyone suggest the best approach please, I did consider using javascript to adjust the layout, but would prefer not to take this route.

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

楠木可依 2024-12-19 07:21:20

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

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

< a href="http://m.oasis-stores.com/" rel="nofollow">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}

不过请注意固定宽度分配。

A good attempt. I use this, see my link for an example, however this is only for iPhone mainly as the iPad is different. I would suggest seeing the FIXED layouts on:

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" />

Notice I do not use the HTML5 heading. This is simply for other use of mobile devices. 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}

Notice the fixed width assignment though.

回复收藏 0 原文

~没有更多了~