移動端web相容各種解析度寫法

標籤：length   event   元素   eve   IV   gettime   err   false   實現   

移動端web開發最好用rem單位，再設定以下js，以iphone6 750*1334為基準

<script>        var size = document.documentElement.clientWidth / 750 * 100;        //PC端訪問時，默認viewport為100        if (!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {            size = 100;        }        document.documentElement.style.fontSize = size + ‘px‘;        //解決iOS safari 禁用縮放無效問題        window.onload = function () {            document.addEventListener(‘gesturestart‘, function (e) {                e.preventDefault();            });            document.addEventListener(‘dblclick‘, function (e) {                e.preventDefault();            });            document.addEventListener(‘touchstart‘, function (event) {                if (event.touches.length > 1) {                    event.preventDefault();                }            });            var lastTouchEnd = 0;            document.addEventListener(‘touchend‘, function (event) {                var now = (new Date()).getTime();                if (now - lastTouchEnd <= 300) {                    event.preventDefault();                }                lastTouchEnd = now;            }, false);        };</script>

相當於在根html元素設定了font-size：100px

html {    font-size: 100px;}

會根據移動端尺寸大小對應改變根html的font-size，從而實現對各種螢幕大小的相容

div {  font-size: .14rem;  // 字型就被對應設定成14px  width: 2rem;         // 寬度被對應設定成200px      }

 

移動端web相容各種解析度寫法