当我们谈论“移动”设备时，最大尺寸是多少？

Question

所以，我想对我的网站进行“移动”朋友视图。它的液体设计已经完成，但手机绝对需要不同的外观。现在，如何检测我是否使用移动设备（iphone、ipad、android）访问过它？更具体地说，我想象好像屏幕宽度小于一个值（不知道那个值），那么这被认为是移动客户端。如何检测并生成移动优化的 CSS/HTML 输出？也许我太简单了，但对我来说移动客户端=更小的屏幕，仅此而已

Answer 1

确实没有什么好方法。以前你可以说，如果像素低于一定数量，那么它就是一部手机。但现在手机的像素数越来越高，屏幕也越来越大。平板电脑现在小至 7 英寸，但它们可能会变得更小。一些手机超过 5 英寸，并且可能会变得更大。然后还有诸如物理像素与 CSS 像素之比之类的问题需要考虑。

如果不是屏幕尺寸或像素数，则可能是它是否支持触摸。但 Windows 8 颠覆了这一点，因为它支持桌面触摸。

我想说这取决于内容而不是设备。使用不同的宽度测试您的网站。查看宽度何时变得不适合内容，并在其中插入媒体查询以调整布局。我认为内容优先而不是设备优先的策略更适合未来。

还要记住，需要移动设备友好布局的可能不仅仅是移动设备。例如，某人可能在小窗口而不是全屏中使用浏览器，或者他们可能在 Windows 8 中使用对齐模式，其中宽度与 iPhone 宽度相同，均为 320 像素。

Answer 2

使用媒体查询。然后您可以检测您是否在移动设备上，浏览器将加载移动 CSS，如果您在 PC 上，浏览器将加载 PC 版本的 CSS。

http://www.w3.org/TR/css3-mediaqueries/

然后你可以像这样开发移动设备CSS（假设移动设备有480x640像素）：

@media screen and (max-device-width:480px){
    ...
    put your mobile device CSS code here
    ...
}

假设您想为平板电脑开发CSS（1.024x768像素）

@media screen and (max-device-width:1024px) and (orientation:portrait){
    ...
    put your tablet device CSS code here when tablet has portrait orientation. 
    ...
}

@media screen and (max-device-width:1024px) and (orientation:landscape){
    ...
    put your tablet device CSS code here when tablet has landscape orientation. 
    ...
}

对于 PC（1280x968 像素）：

@media screen and (max-device-width:1280px){
    ...
    put your PC CSS code here
    ...
}

Answer 3

使用 navigator.userAgent 对移动设备进行绝对最佳识别。

    if (/Mobi/.test(navigator.userAgent)) {
        // MOBILES
    } else {
        // NON-MOBILE
    }