移动网页布局不一致问题



我尝试配置以下页面,使页面宽度适合设备的屏幕大小:http://www.kinohunt.com/movies/17353

我用来配置它的html如下:

然而,此页面在iPad上的渲染效果与预期一致,但在iPhone上则不然当在iPhone中打开时,页面的大小总是太大,因此超过了屏幕宽度,因此右侧被裁剪。

我是否未正确使用视口配置?

我也有一个类似的页面,在dom中有更多的电影细节对象,它在iPhone上的大小适当:http://www.kinohunt.com/top/imdb

您使用的是硬编码的宽度值。请改用百分比。例如,width: 80%。这将允许您的页面元素相应地缩放。

iPad可能看起来很好,因为它的视口比你硬编码的宽度设置大(在你的情况下,"顶表"上的780px)。

以下是jsfiddle示例(在每个示例中调整浏览器大小):

  • 此示例使用宽度值的百分比(请注意框是如何随浏览器缩放的)http://jsfiddle.net/reala/09kwrmx1/

  • 此示例使用硬编码的宽度值(就像您正在使用的一样)。请注意长方体如何不随浏览器缩放http://jsfiddle.net/reala/6xdxm28t/

相关内容

  • 没有找到相关文章

最新更新