zoukankan      html  css  js  c++  java
  • 移动端自适应屏幕方案

    现在移动端尺寸越来越多,如果在不同宽度的设备上完美呈现效果也是前端程序员必备的功课。

    通过一天的查找资料跟以前的经验,总结了以下的方案:

    1:前端样式固定用320px宽度做,左右留白,背景用颜色或者背景填充。

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=1, minimal-ui"/>

       图片用实际像素background-size: 100% 100%;

    2:不写宽度,所有内容以中轴线为标准,左右铺开。

    3:写好网页后用JS获取屏幕宽度,然后设置body:zoom(有时字体会有问题)或者scale(只适用于单页)缩放尺寸

    4:参考淘宝方案http://www.html-js.com/article/Like-the-winter-flexible-design-and-implementation-of-the-mobile-phone-Taobao-cold

    设置html的font-size和viewport来控制大小

     

    备注:关于window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
    公式表示就是:window.devicePixelRatio = 物理像素 / dips

    dip/dp/device independent pixels,设备独立像素)与屏幕密度有关

    以下代码是以640px的设计图为例,用动态JS设置大小的代码

    <script>
        (function(doc,win){
            var docEl=doc.documentElement,
            isIOS=navigator.userAgent.match(/iphone|ipod|ipad/gi),
            dpr=isIOS?Math.min(win.devicePixelRatio,3):1,
            scale=1/dpr,
            resizeEvt="orientationchange" in window?"orientationchange":"resize";
            docEl.dataset.dpr=dpr;
    
            var metaEl=doc.createElement("meta");
            metaEl.name="viewport";
            metaEl.content="initial-scale="+scale+",
            maximum-scale="+scale+", 
            minimum-scale="+scale;
            docEl.firstElementChild.appendChild(metaEl);
    
            var recalc=function(){
                var width=docEl.clientWidth;
                if(width/dpr>640){
                    width=640*dpr
                }
                docEl.style.fontSize=100*(width/640)+"px"};
                recalc();
                if(!doc.addEventListener){return}
                win.addEventListener(resizeEvt,recalc,false)
        })(document,window);
        </script>
    View Code

     比如:

    以下代码是750px的设计图为例

    头部直接定义<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

     <script type="text/javascript">
            "use strict";
            (function (e) {
                var i = 1, n = window.navigator.userAgent;
                var t = n.match(/iphone/i);
                var d = n.match(/yixin/i);
                var o = n.match(/Mb2345/i);
                var w = n.match(/mso_app/i);
                var a = n.match(/sogoumobilebrowser/gi);
                var r = n.match(/liebaofast/i);
                var s = n.match(/GNBR/i);
                function h() {
                    var e = screen.width > 0 ? window.innerWidth >= screen.width || window.innerWidth == 0 ? screen.width : window.innerWidth : window.innerWidth, i, n;
                    if (window.devicePixelRatio) {
                        i = window.devicePixelRatio
                    } else {
                        i = t ? e > 818 ? 3 : e > 480 ? 2 : 1 : 1
                    }
                    if (t)e = screen.width;
                    n = e > 1080 ? 144 : e / 7.5;
                    n = n > 32 ? n : 32;
                    window.screenWidth_ = e;
                    window.htmlFontSize_ = n;
                    if (d || o || w || a || r || s) {
                        setTimeout(function () {
                            e = screen.width > 0 ? window.innerWidth >= screen.width || window.innerWidth == 0 ? screen.width : window.innerWidth : window.innerWidth;
                            n = e > 1080 ? 144 : e / 7.5;
                            n = n > 32 ? n : 32;
                            document.getElementsByTagName("html")[0].dataset.dpr = i;
                            document.getElementsByTagName("html")[0].style.fontSize = n + "px";
                        }, 500)
                    } else {
                        document.getElementsByTagName("html")[0].style.fontSize = n + "px";
                    }
                }
                h()
            })(window.NEWAP = window.NEWAP || {});
        </script>
    View Code

     

    http://play.163.com/special/wow-guanying/

  • 相关阅读:
    牛客网 二叉树的镜像 JAVA
    牛客网 反转链表 JAVA
    牛客网 调整数组顺序使奇数位于偶数前面 JAVA
    Integer to Roman LeetCode Java
    Valid Number leetcode java
    Longest Common Prefix
    Wildcard Matching leetcode java
    Regular Expression Matching
    Longest Palindromic Substring
    Add Binary LeetCode Java
  • 原文地址:https://www.cnblogs.com/huangxiaowen/p/4775915.html
Copyright © 2011-2022 走看看