如何根据设备调整网页大小答案

【问题标题】：How to resize webpage depending on the device如何根据设备调整网页大小
【发布时间】：2012-01-25 12:07:15
【问题描述】：

有没有人知道 javascript 可以检测用户是在使用手机还是普通计算机，然后调整窗口大小以适应该设备，如果无法使用 javascript 完成，有没有人知道它可以使用的方法完成。

感谢您提供的任何帮助

【问题讨论】：

Detect iPhone/iPad purely by css 的可能重复项

【解决方案1】：

杂志的好文章

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/#more-50749

当量。

 @media only screen and (max-device-width: 480px) {
        // insert styling here… 
 }

【讨论】：

【解决方案2】：

我用这些：

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
} 

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
}

/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
}

http://zsprawl.com/iOS/2012/03/css-for-iphone-ipad-and-retina-displays/

【讨论】：