3

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

4

2 回答 2

1

真的没有什么好办法。在您曾经能够说如果低于一定数量的像素之前，它就是一部手机。但现在手机的像素数越来越高，屏幕也越来越大。平板电脑现在只有 7 英寸，但它们可以变得更小。有些手机超过 5 英寸并且可以变得更大。然后需要考虑诸如物理像素与 css 像素比率之类的事情。

如果不是屏幕尺寸或像素数，也许它是否支持触摸。但 Windows 8 将其抛诸脑后，因为它支持桌面触控。

我会说这取决于内容而不是设备。使用各种宽度测试您的网站。查看宽度何时对内容变得次优，并在那里输入媒体查询以适应布局。我认为内容优先而不是设备优先的策略更具前瞻性。

还要记住，它可能不仅仅是一个想要您的移动友好布局的移动设备。例如，soemone 可能在小窗口中使用他们的浏览器，而不是全屏，或者他们可能在 Windows 8 中使用快照模式，其中宽度与 iPhone 的宽度相同，为 320 像素。

于 2013-05-17T00:11:57.873 回答
1

使用媒体查询。然后您可以检测您是否在移动设备上，浏览器将加载移动 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
    ...
}
于 2013-05-17T00:21:39.483 回答