如何使用 CSS 优化移动浏览？答案

【问题标题】：How can I optimize mobile browsing using CSS?如何使用 CSS 优化移动浏览？
【发布时间】：2014-08-24 04:30:45
【问题描述】：

我目前正在学习 HTML/CSS 入门课程，但在针对各种移动分辨率优化我的网页时遇到了问题。我一直在使用网站分辨率模拟器进行测试，但我的布局在某些设置下总是看起来很不稳定。

有没有办法使用 HTML 和 CSS 自动检测分辨率？

编辑：我已经添加了元视口

【问题讨论】：

查看媒体查询
和视口meta标签

标签： html css mobile

【解决方案1】：

是的。

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

来源：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

【讨论】：