zoukankan      html  css  js  c++  java
  • @media兼容iphone4、5、6

    在网页中,pixel与point比值称为device-pixel-ratio,普通设备都是1,iPhone 4是2,有些Android机型是1.5。

    那么-webkit-min-device-pixel-ratio:2可以用来区分iphone(4/4s/5)和其它的手机

      iPhone4/4s的分辨率为640*960 pixels,DPI为是320*480,设备高度为480px

      iPhone5的分辨率为640*1136 pixels,DPI依然是320*568,设备高度为568px

      iPhone6的分辨率为750*1334 pixels,DPI依然是375*667,设备高度为667px

      iPhone6 Plus的分辨率为1242x2208 pixels,DPI依然是414*736,设备高度为736px

    那么我们只需要判断iphone手机的device-height(设备高)值即可区别iPhone4和iPhone5、iPhone6、iPhone6 Plus

    一、用CSS,直接写到样式表里

      @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
        .class{}
      }
    
      @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
        .class{}
      }
    
      @media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */
        .class{}
      }
      @media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */
        .class{}
      }


    二、链接到一个单独的样式表,把下面的代码放在<head>标签里

      /* 兼容iphone4/4s */
    
      <link rel="stylesheet" media="(device-height: 480px) and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css" />
    
      /* 兼容iphone5 */
    
      <link rel="stylesheet" media="(device-height: 568px)and (-webkit-min-device-pixel-ratio:2)" href="iphone5.css" />
    
      /* 兼容iphone6 */
    
      <link rel="stylesheet" media="(device-height: 667px)and (-webkit-min-device-pixel-ratio:2)" href="iphone6.css" />
    
      /* 兼容iphone6 Plus */
    
      <link rel="stylesheet" media="(device-height: 736px)and (-webkit-min-device-pixel-ratio:2)" href="iphone6p.css" />

    三、使用JS判断

      //通过高度来判断是否是iPhone 4还是iPhone 5或iPhone 6、iPhone6 Plus
    
      isPhone4inches = (window.screen.height==480);/* 兼容iphone4/4s */
    
      isPhone5inches = (window.screen.height==568);/* 兼容iphone5 */
    
      isPhone6inches = (window.screen.height==667);/* 兼容iphone6 */
    
      isPhone6pinches = (window.screen.height==736);/* 兼容iphone6 Plus */
    

      








  • 相关阅读:
    Loadrunner日志设置与查看
    webclient乱码问题
    (转)ASP.NET QueryString乱码解决问题
    Request.url请求路径的一些属性
    (转)Asp.net的HttpCookie写入汉字读取时为乱...
    (转)[jQuery]使用jQuery.Validate进行客户端验证(初级篇)——不使用微软验证控件的理由
    jquery validate 配合ligerui使用
    (转)ligerUI 使用教程之Tip介绍与使用
    (转)XML CDATA是什么?
    (转)C#中Trim()、TrimStart()、TrimEnd()的用法 .
  • 原文地址:https://www.cnblogs.com/eyed/p/7865165.html
Copyright © 2011-2022 走看看