Question

我正在使用HTML5 CSS3和Javascript处理Web应用程序，以便与Tablets兼容。我已经包含了webkit提供的基本触摸特定事件。我想知道是否可以根据平板电脑的方向更改Web应用程序的布局或设计。

我注意到网络应用程序没有充分利用平板电脑（iPad）上的空间，布局显得很奇怪。有什么方法可以根据方向修改设计和布局。

会对此表示感谢。

Answer 1

我不是平板电脑专家，但看起来您可以根据window.onresize更改布局。

Answer 2

没有必要编写window.onresize你只需用CSS就可以了。你已经在html页面写了

<meta name="viewport" content = "user-scalable=no, width=1024" />'
<link rel="stylesheet" media="all" href="stylesheet/ipad.css" type="text/css" />;

＆安培;为ipad写你的css。有关更多信息，请看这些链接的http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes，http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm，http://thomasmaier.me/blog/2010/03/04/howto-css-for-the-ipad/

Answer 3

从Responsive Web Design查看有关A List Apart的优秀文章。

您可以使用以下媒体查询仅为某些屏幕分辨率添加样式表：

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />

你甚至可以在你的CSS中使用媒体查询：

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

然后，您可以设置一个页面，其布局可自动调整为可用宽度。

我在自己的网站上试过这个;对于@media screen and (max-width: 600px)我从两列布局切换到一列。当我在Chrome中调整窗口大小时，它可以正常工作，但在我的Droid Incredible上，我仍然可以获得两列。我没有时间研究是否应该使用max-device-width，或者Android浏览器是否支持此功能。如果是后者，我相信苹果已经足够了，这应该适合你。

祝你好运！

是否可以更改Web应用程序视图以适合平板电脑方向

3 个答案: