zoukankan      html  css  js  c++  java
  • web app iphone4 iphone5 iphone6 响应式布局 适配代码

    现在满大街的APP,除了游戏,软件图形类的需要用原生开发好点。现在大多还是基于WEBAPP或者混合的hybrid app,大家都知道资讯类的小应用其实网页就可以胜任,当然如果你要调用一些应设备,原生的APP外hybrid app也是一个不错的选择。不过我们今天的主角是WEB APP,WEB APP好处就是,随时随地有网就能看,简单实用。对于开发来说,更是低成本高效率,当然对于追求细致的来说。。。就有点。。。。。好了,下面我们来看看WEB APP怎么区分iphone 4 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

    通过 CSS3 的 Media Queries 特性,可以写出兼容iPhone4和iPhone5、iPhone6、iPhone6 Plus的代码~~


    方式一,直接写到样式里面

    @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>标签里

    <link rel="stylesheet" media="(device-height: 480px) and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css" />

    <link rel="stylesheet" media="(device-height: 568px)and (-webkit-min-device-pixel-ratio:2)" href="iphone5.css" />

    <link rel="stylesheet" media="(device-height: 667px)and (-webkit-min-device-pixel-ratio:2)" href="iphone6.css" />

    <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);

    isPhone5inches = (window.screen.height==568);

    isPhone6inches = (window.screen.height==667);

    isPhone6pinches = (window.screen.height==736);

  • 相关阅读:
    97. Interleaving String
    96. Unique Binary Search Trees
    95. Unique Binary Search Trees II
    94. Binary Tree Inorder Traversal
    odoo many2many字段 指定打开的form视图
    docker sentry 配置文件位置
    postgres 计算时差
    postgres 字符操作补位,字符切割
    postgres判断字符串是否为时间,数字
    odoo fields_view_get
  • 原文地址:https://www.cnblogs.com/jinling/p/5013589.html
Copyright © 2011-2022 走看看