移动css但横向模式？

Question

我正在为移动设备使用特殊的css，但是将max-device-width设置为480 px（我不知道这是否是标准尺寸）。但是，当我的屏幕处于横向模式时，宽度实际上大于480像素，因此这个mobile.css文件没有加载。

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

处理这种情况的正确方法是什么？请帮忙！

----------------------------更新------------------ -------------------------

所以，这很好用，但看起来移动设备在最初加载页面时做的很奇怪。

Answer 1

这是我发现的作品。我正在为iOs / Android设备开发一个网站，我正在使用670px：

<meta name="viewport" content="width=670, initial-scale=0.45, minimum-scale=0.45"/>

我还将所有内容都放在一个带有以下样式的div中

#mainDiv
{
        max-width:670px; 
        margin-right: auto; 
}

这适合移动视口适用于肖像，因为div是左对齐的，也是风景。