zoukankan      html  css  js  c++  java

  • 【原】CSS3 Media在常用设备的设置值

    摘要：今天的一个小小的项目中，在各种手机上样式都显示正常，唯独iphone4s的有些许问题。产品经理又说iphone4s用户还挺多的，无奈，只能查一查iphone4s的media值，顺便做个小小总结;

    直接上代码：

    手机

      iphone

    /* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device- 320px) 
  and (max-device- 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device- 320px) 
  and (max-device- 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device- 320px) 
  and (max-device- 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device- 320px) 
  and (max-device- 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device- 320px) 
  and (max-device- 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device- 320px) 
  and (max-device- 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device- 375px) 
  and (max-device- 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device- 375px) 
  and (max-device- 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device- 375px) 
  and (max-device- 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device- 414px) 
  and (max-device- 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device- 414px) 
  and (max-device- 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device- 414px) 
  and (max-device- 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}
    View Code

    Galaxy phone
    /* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device- 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */
@media screen 
  and (device- 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device- 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S4 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device- 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device- 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device- 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S5 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device- 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device- 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device- 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}
    View Code
    

     HTC phone
    

    

    

    /* ----------- HTC One ----------- */

/* Portrait and Landscape */
@media screen 
  and (device- 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device- 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device- 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}
    

    
View Code
    


     平板
    


    Ipads
    

    

    

    /* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device- 768px) 
  and (max-device- 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device- 768px) 
  and (max-device- 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device- 768px) 
  and (max-device- 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device- 768px) 
  and (max-device- 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device- 768px) 
  and (max-device- 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device- 768px) 
  and (max-device- 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device- 768px) 
  and (max-device- 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device- 768px) 
  and (max-device- 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device- 768px) 
  and (max-device- 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}
    

    
View Code
    


     Galaxy Tablets
    

    

    

    /* ----------- Galaxy Tab 10.1 ----------- */

/* Portrait and Landscape */
@media 
  (min-device- 800px) 
  and (max-device- 1280px) {

}

/* Portrait */
@media 
  (max-device- 800px) 
  and (orientation: portrait) { 

}

/* Landscape */
@media 
  (max-device- 1280px) 
  and (orientation: landscape) { 

}
    

    
View Code
    


    Asus Tablets
    

    

    

    /* ----------- Asus Nexus 7 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device- 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Portrait */
@media screen 
  and (device- 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device- 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape) {

}
    

    
View Code
    


    Kindle Fire
    

    

    

    /* ----------- Kindle Fire HD 7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device- 800px) 
  and (max-device- 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */
@media only screen 
  and (min-device- 800px) 
  and (max-device- 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device- 800px) 
  and (max-device- 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

/* ----------- Kindle Fire HD 8.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device- 1200px) 
  and (max-device- 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */
@media only screen 
  and (min-device- 1200px) 
  and (max-device- 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device- 1200px) 
  and (max-device- 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}
    

    
View Code
    


    笔记本电脑
    


    LapTaps
    

    

    

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

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device- 1200px) 
  and (max-device- 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}
    

    
View Code
    


    可穿戴设备
    


    Apple watch
    

    

    

    /* ----------- Apple Watch ----------- */
@media
  (max-device- 42mm)
  and (min-device- 38mm) { 

}
    

    
View Code
    


     Moto 360 Watch
    

    

    

    /* ----------- Moto 360 Watch ----------- */
@media 
  (max-device- 218px)
  and (max-device-height: 281px) { 

}
    

    
View Code
    


    微信页面的适配
    


    

    

    @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */}
@media only screen and (max-device-width :480px){ }
@media only screen and (min-device-width :481px){ }

/*6*/
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ }

/*6+*/
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ }

/*魅族*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ }

/*mate7*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }

/*4 4s*/
@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }
    

    
View Code
    



    参考： https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
    


    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  Spring + SpringMVC + MyBatis
                    
    jquery+bootstrap使用数字增减按钮
                    
    Eclipse添加代码注释模板
                    
    No goals have been specified for this build
                    
    字符串前面自动补零
                    
    深入理解JavaScript系列
                    
    java判断A字符串是否包含B字符串
                    
    WebSocket 实战
                    
    button点击切换，获取按钮ID
                    
    JS 中判断空值 undefined 和 null
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/xianyulaodi/p/5727772.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看