平板电脑上的全宽html身体

时间:2015-09-30 14:51:22

标签: html css html5 css3

基本问题

如何将网站设置为宽度:平板电脑设备为100%。

有java脚本选项可以检测屏幕大小并相应地重新调整CSS。如果这是目前唯一可以接受的选项,但肯定会使用HTML5 / CSS3,这是一个更优雅的解决方案。

详细说明:

我并不担心移动设备,因为应用程序非常详细,移动版本必须有更简单的选项。

问题出现了,因为平板电脑现在具有高清晰度。因此,设计一个最大宽度:998px的网站过去没问题,全高清平板电脑不会显示为100%宽度,因为它显然会超过998px。

我已经研究过缩放,但大家一致认为它还没有得到支持。

最后

我应该开始设计我的页面以适应最大宽度:1280px,并使我的表格/表格宽度:100%?

目前我正在使用http://getbootstrap.com/并且令人惊讶,但没有平板电脑检测库。我有不同大小的设备的课程,但它想说,平板电脑=宽度100%。

最后的注释

如果大多数示例都不清楚,请遵循<body><div class="container">...</div></body>所以我在.container之后在平板电脑上保持100%的宽度。

我目前100%高达998px,但可能需要将其增加到1200px,反馈也很好。

修改1

我的投票太广了。能否详细说明,因为我在发布之前已经搜索了几周。关于如何创建全宽平板电脑网站的问题很少。如果你想要例子,我可以创建一些页面。问题是这么多不同的决议。例如,我想要一个带有帐户/联系人详细信息的页面或表单,并使其适合任何大小的平板电脑,如果我在50英寸的屏幕上打开页面,如果输入宽度,它将无法工作:百分。为什么限制为最大宽度:998px,以尝试适合大多数桌面。但平板电脑尽管分辨率很高,但它们的屏幕很小,并且看起来非常完整。

1 个答案:

答案 0 :(得分:0)

如果您使用的是bootstrap,它可以检测到它。

进入css并查看评论,我会找到类似的内容:

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

默认情况下它是全宽的,但容器有一些边距,但没什么可担心的,你总是可以覆盖这些类或使用

制作自定义样式表

customize your bootstrap

如果您想手动完成,平板电脑的全宽度就像设置container div width:100%

一样简单

我的建议:自定义boostrap上.container的边距(也可能是cols)以获得全宽度模板。