zoukankan      html  css  js  c++  java
  • webapp开发——‘手机屏幕分辨率’与‘浏览器分辨率’不要混淆

      关于webApp响应式设计遇到的问题,分享给大家,最近在做一个手机webApp,因为我手机是”米3“,屏幕截图大小是1080宽,所以css样式用@media screen and(min-1080px){  …… },来判断屏幕最小宽度是1080px的手机web显示什么样的样式,结果却不能正常显示我所指定的css样式,最后在网上查了一下,发现分辨率的范围不对惊恐

    css代码如下:

        @media screen and (min-1080px){  
          ..............................
     }  

            意思是在小宽度为1080px的设备上应用{}里面的样式。这里的width,注意是手机浏览器的分辨率,而不是手机设备的屏幕分辨率。比如苹果4的手机屏幕分辨率是960×640。而其自带的Safari浏览器的分辨率是320*480。米3手机屏幕分辨率是1080宽,浏览器分辨率却是360px宽惊讶

    我们可以通过如下代码检测所用的浏览器的分辨率:

    <script type='text/javascript'>
    document.write("浏览器分辨率是"+document.documentElement.clientWidth+"*"+document.documentElement.clientHeight );
    document.write("屏幕分辨率是"+window.screen.width+"*"+window.screen.height);
    </script>

    手机不同浏览器分辨率分区响应式设计css代码:

     

    @media screen and (min- 320px){
    ....................................
    }
    @media screen and (min- 241px) and (max- 320px){
    ...................................
    }
    @media screen and (min- 1px) and (max- 240px){
    ..................................
    }

    ipod touch 4/iphone4/iphone4s

    竖屏
    width/height 320/356
    横屏
    width/height 480/208

    iphone5

    竖屏
    width/height 320/444
    横屏
    width/height 568/208

    ipad mini

    竖屏
    width/height 768/928
    横屏
    width/height 1024/672

    New Pad

    竖屏
    width/height 768/928
    横屏
    width/height 1024/672

  • 相关阅读:
    elasticsearch中多个字段聚合及java实现
    elasticsearch中must和should组合查询
    Hash(哈希/散列)表中冲突处理及命中计算
    PHP代码审计理解(一)----Metinfo5.0变量覆盖
    SSL 3.0 POODLE攻击信息泄露漏洞_CVE-2014-3566
    菜鸡试飞----SRCの信息收集手册
    python3-邮件发送-不同格式
    windows下常用快捷指令记忆
    杂记
    偶然碰到的编码转换技巧--叮!
  • 原文地址:https://www.cnblogs.com/kt520/p/4215803.html
Copyright © 2011-2022 走看看