美文网首页
移动端页面适配以及meta的属性和用法

移动端页面适配以及meta的属性和用法

作者: XZ阳光小熊 | 来源:发表于2016-07-08 19:55 被阅读7356次

    移动端段适配一直都是我们开发过程中最头疼的问题,下面总结了一些适配的方法,有的是转自其它地方,由于本人水平有限,若有错漏之处敬请谅解。


    一、rem布局

    代码如下:
    注意这段代码一定要放在body之上,否则无效。

    <script type="text/javascript">
            (function (doc, win) {
                var docEl = doc.documentElement,
                    // orientationchange 事件是在用户水平或者垂直翻转设备(即方向发生变化)时触发的事件。
                    // onresize 事件会在窗口或框架被调整大小时发生。
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        window.clientWidth = docEl.clientWidth;
                        if (!window.clientWidth) return;
                        docEl.style.fontSize = 40 * (window.clientWidth / 640) + 'px';
                        window.base = 40 * (window.clientWidth / 640);
                    };
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
     
                doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window);
     </script>
    

    也可参照http://caibaojian.com/flexible-js.html

    二、首先请了解一下移动前端中 viewport (视口)http://www.css88.com/archives/5975

    这里介绍一下几个移动前端适配—低级、无趣、一堆问题的老方法。早在几年前,移动前端适配有几个很简单使用的方法。那时屏幕尺寸或者说分辨率没如今这么多。一般设计师设计移动端页面统一按照640像素的宽度设计。因为当时的主流是iPhone4,iPhone4s ,iPhone5及iPhone5s,物理像素宽度为 640,分辨率为320。其他安卓机型可以根据这些尺寸做简单粗暴的匹配。

    例如下面是适配最简单粗暴的方法,而且根据我平时查看项目的代码的习惯,还有相对一部分项目还是使用这个方法做项目,或者维护项目:

    <meta name="eqMobileViewport" content="width=320,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    

    看起来很简单,也很实用。开发时候一切根据640的设计稿除以2处理,字体也用简单的像素做单位(用rem换算麻烦)似乎是很完美,但是实际情况,特别是一些对齐,背景吻合总是会出现问题。还有就是用现在高分辨率的iPhone6s等手机看,总是会被设计师鄙视。

    如今手机屏幕尺寸越来越多,可以稍微升级一下上面的方法,同样在html头部head标签中先插入一个meta标签,在插入一个脚本设置缩放值:

    <meta id="eqMobileViewport" name="viewport" content="width=320, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script>
     var g = document.documentElement.clientWidth / 320;
     document.getElementById('eqMobileViewport').setAttribute("content", "width=320, initial-scale=" + g + ", maximum-scale=" + g + ", user-scalable=no")
    </script>
    

    这样就比较完美了。

    三、meta基础知识

    也可参照以下网站

    http://www.daqianduan.com/6281.html

    http://www.w3cfuns.com/notes/18165/f08c0ec910dad6d2c90807a0318abda8.html

    相关文章

      网友评论

          本文标题:移动端页面适配以及meta的属性和用法

          本文链接:https://www.haomeiwen.com/subject/eudrjttx.html