Question

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

Answer 1

真的不是一个好方法。在您以前能够说出一定数量的像素之前，它是一部手机。但是现在手机的像素数量也越来越高，但同样重要的是大屏幕。平板电脑小到7＆＃34;现在，但他们可能会变小。有些手机超过5＆＃34;并可能变大。然后有像物理像素到css像素比率的东西要考虑。

如果不是屏幕尺寸或像素数，可能是否支持触摸。但是Windows 8将它放在了头上，因为它支持桌面触控。

我想说这取决于内容而不是设备。使用各种宽度测试您的网站。查看宽度何时变为内容的次优，并在那里引入媒体查询以适应布局。我认为首先是内容而不是设备优先策略是未来的证明。

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

Answer 2

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

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
    ...
}

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

2 个答案: