所有设备的HTML5应用程序的媒体查询 [英] Media Query for HTML5 App for All Devices

问题描述

任何一个有想法，关于所有媒体查询
，这将有助于检测个别设备，例如：

iOS，iPhone 5，iPhone Ratina显示，android手机。 ，http：// css-tricks。

com / snippets / css / media-queries-for-standard-devices /> 媒体查询标准设备

  / *智能手机（纵向和横向）----------- * / 
 @media只有屏幕
和-width：320px）
 and（max-device-width：480px）{
 / * Styles * / 
} 
 
 / *智能手机--------- * / 
 @media only screen 
 and（min-width：321px）{
 / * Styles * / 
} 
 
 / *智能手机（肖像）----------- * / 
 @media只有屏幕
和（max-width：320px）{
 / *样式* / 
} 
 
 / * iPad（纵向和横向）----------- * / 
 @media只有屏幕
和（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 ）
和（orientation：landscape）{
 / *样式* / 
} 
 
 / * iPads -  * / 
 @media only screen 
 and（min-device-width：768px）
 and（max-device-width：1024px）
 and（orientation：portrait）{ 
 / *样式* / 
} 
 
 / *台式机和笔记本电脑----------- * / 
 @media只有屏幕
和（min-width：1224px）{
 / *样式* / 
} 
 
 / *大屏幕----------- * 
 @media only screen 
 and（min-width：1824px）{
 / * Styles * / 
} 
 
 / * iPhone 4 --- -------- * / 
 @media 
只有屏幕和（-webkit-min-device-pixel-ratio：1.5），
只有屏幕和（min- pixel-ratio：1.5）{
 / * Styles * / 
} 
  

对于Retina显示使用

  @media 
只有屏幕和（-webkit-min-device-pixel-ratio：2 ），
 only screen and（min-resolution：192dpi）{
 / * Retina-specific stuff here * / 
} 
  

Any one Have Idea , about all media queries that will help to detect individual devices such as:

iOS,iPhone 5 , iPhone Ratina display , android mobile. , ipad, tablets atc ?

解决方案

go for media-queries-for-standard-devices

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

For Retina Display use

@media 
  only screen and (-webkit-min-device-pixel-ratio: 2), 
  only screen and (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

这篇关于所有设备的HTML5应用程序的媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！