zoukankan      html  css  js  c++  java
  • 手机端开发的问题(摘要)

    监听屏幕的变化就可以做到动态切换元素样式:

    window.onresize = _.debounce(function() {

          var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;

          document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';

    }, 50);

    解决高保真标注与实际开发值比例问题

    如果你们设计稿标准是iphone5,那么拿到设计稿的时候一定会发现,完全不能按照高保真上的标注来写css,而是将各个值取半,这是因为移动设备分辨率不一样。设计师们是在真实的iphone5机器上做的标注,而iphone5系列的分辨率是640,实际上我们在开发只需要按照320的标准来。为了节省时间,不至于每次都需要将标注取半,我们可以将整个网页缩放比例,模拟提高分辨率。这个做法很简单,为不同的设备设置不同的meta即可:

    var scale = 1 / devicePixelRatio;

    document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

    (function() {

      // deicePixelRatio :设备像素

      var scale = 1 / devicePixelRatio;

      //设置meta 压缩界面 模拟设备的高分辨率

      document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

      //debounce 为节流函数,自己实现。或者引入underscoure即可。

      var reSize = _.debounce(function() {

          var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;

          //按照640像素下字体为100px的标准来,得到一个字体缩放比例值 6.4

          document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';

      }, 50);

      window.onresize = reSize;

    })();

  • 相关阅读:
    uboot中setenv和saveenv分析
    DMA和通道的区别
    openwrt 切换overlay文件系统为根文件系统
    华为SDN:解决传统网络3大问题
    企业需要申请多大宽带的专线?如何节省专线费用?
    stp
    inotify文件监控
    Qt中C++与QML交互
    内核空间可以直接访问应用层空间地址
    linux 提权漏洞总结
  • 原文地址:https://www.cnblogs.com/tanks/p/6946273.html
Copyright © 2011-2022 走看看