在方向改变移动web应用CSS休息 [英] mobile webapp CSS breaks on orientation change

问题描述

在移动设备被旋转到横向（目标设备是iPhone和Android），我的web应用程序的CSS得到完全对齐。我试着用JavaScript解决方案解释<一个href=\"http://stackoverflow.com/questions/2313194/can-i-trigger-a-css-event-in-mobile-safari-upon-iphone-orientation-change\">here为了得到我的应用程序到portrait.css和方向变化的landscape.css文件之间切换，但仍然没有工作。它甚至搞砸portrait.css一旦他们都发布到活动服务器（尽管它的工作我的本地机器上）。

The CSS for my webapp gets completely misaligned when the mobile device is rotated to landscape (target devices are iphone and android). I tried using the javascript solution explained here in order to get my app to switch between a portrait.css and a landscape.css file on orientation change, but that still didn't work. It even messed up the portrait.css once they were both posted to the live server (although it worked on my local machine).

有关应用程序的URL为 http://mobile.geekstats.com/

The url for the app is http://mobile.geekstats.com/

有谁知道我可以修复景观CSS？谢谢！

Does anyone know how I can fix the landscape css? Thanks!

推荐答案

使用CSS媒体查询来更新您的设计

Use CSS Media Queries to update your design

iPhone不支持目前的方向（THX @vava），所以使用媒体查询的宽度低于

iPhone doesn’t support orientation currently (Thx @vava), so use media queries for width below

http://www.w3.org/TR/css3-mediaqueries/#定向

@media all and (orientation:portrait) {
  h1 {
    color: red;
  }
}
@media all and (orientation:landscape) {
  h1 {
    color: blue;
  }
}

宽度查询：

/* Portrait */
@media only screen and (max-width: 320px) {
  h1 {
    color: red;
  }
}
/* Landscape */
@media only screen and (min-width: 321px) {
  h1 {
    color: blue;
  }
}

查看 http://lessframework.com 基于宽度的媒体查询设计的例子。

Check out http://lessframework.com for examples of width-based media query design.

有许多其他的媒体查询选项定位的观看sesssion的特定属性：搜索
http://www.w3.org/TR/css3-mediaqueries/#contents

There are many other media query options to target specific attributes of the viewing sesssion:
http://www.w3.org/TR/css3-mediaqueries/#contents

这篇关于在方向改变移动web应用CSS休息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！