Question

请告知如何对苹果ipad和iphone屏幕尺寸的横向尺寸应用媒体查询（应该应用什么尺寸的媒体查询）。另请注意，这适用于每个手机和平板电脑的景观视图。

Answer 1

iPad纵向和放大景观

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {Add your styles here}

iPad in landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { Add your styles here}

iPad纵向

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { Add your styles here }

/ *智能手机（人像和风景）----------- * /

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

/ *智能手机（风景）----------- * /

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

/ *智能手机（肖像）----------- * /

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

/ * iPads（人像和风景）----------- * /

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

/ * iPads（风景）----------- * /

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

/ * iPads（肖像）----------- * /

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

/ *台式机和笔记本电脑----------- * /

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

/ *大屏幕----------- * /

@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 */
}

Answer 2

使用以下方式：

步骤：1

在HEAD代码

中添加以下元标记

<meta name="viewport" content="width=device-width, initial-scale=1.0">

步骤：2

相应地添加媒体查询设备类型： http://stephen.io/mediaqueries/