移动前端经验小结

1. 移动端头部标签 head meta
<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 -->
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
    <!-- 声明文档使用的字符编码 -->
    <meta charset='utf-8'>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="name, email@gmail.com"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
     <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

<!-- iOS 设备 begin --> <meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题(iOS 6 新增) --> <meta name="apple-mobile-web-app-capable" content="yes"/> <!-- 是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏 --> <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) --> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <!-- 设置苹果工具栏颜色 --> <meta name="format-detection" content="telphone=no, email=no"/> <!-- 忽略页面中的数字识别为电话,忽略email识别 --> <!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 不让百度转码 --> <meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no">

<!-- iOS 图标 begin --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/> <!-- iPhone 和 iTouch,默认 57x57 像素,必须有 --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/> <!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/> <!-- Retina iPad,144x144 像素,可以没有,但推荐有 --> <!-- iOS 图标 end --> <!-- iOS 启动画面 begin --> <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/> <!-- iPad 竖屏 768 x 1004(标准分辨率) --> <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/> <!-- iPad 竖屏 1536x2008(Retina) --> <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/> <!-- iPad 横屏 1024x748(标准分辨率) --> <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/> <!-- iPad 横屏 2048x1496(Retina) --> <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) --> <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) --> <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) --> <!-- iOS 启动画面 end --> <!-- iOS 设备 end -->
  
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 磁贴颜色 -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <!-- Windows 8 磁贴图标 -->
 
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <!-- 添加 RSS 订阅 -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    <!-- 添加 favicon icon -->

    <!-- sns 社交标签 begin -->
    <!-- 参考微博API -->
    <meta property="og:type" content="类型" />
    <meta property="og:url" content="URL地址" />
    <meta property="og:title" content="标题" />
    <meta property="og:image" content="图片" />
    <meta property="og:description" content="描述" />
    <!-- sns 社交标签 end -->

  <!-- Android设备-->
<meta content="email=no" name="format-detection" />
去除安卓设备对邮箱的自动识别
name属性详解:
主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类。这其中description(站点在搜索引擎上的描述)和keywords(分类关键词)是最重要的,所以应该:
  
一、给每页加一个meta值。
  
  参数:Keywords (关键字)
  说明:为搜索引擎提供的关键字列表
  举例:<meta name="Keywords" Content="苏州SEO,网站优化,网站推广,苏州网络营销,……">
  提示:各关键词间用英文逗号“,"隔开。如果你使用的是中文的标点符号,关键词将不起作用。meta的通常用处是指定搜索引擎用来提高搜索质量的关键词。当数个meta元素提供文档语言从属信息时,搜索引擎会使用lang特性来过滤并通过用户的语言优先。
  
二、参照来显示搜索结果。

  例如:<META NAME="Keywords" CONTENT="SEO,网站优化,搜索引擎优化…">      
         参数:Description (简介)
  说明:Description用来告诉搜索引擎你的网站主要内容。
  举例:<meta name="Description" Content="你网页的简述">
  提示:无
  例如:<META NAME="Description" CONTENT="苏州SEO_Winter为您提供专业的苏州网站优化、搜索引擎优化服务,通过对客户网站优化,使客户网站排名达到搜索引擎首页!">
  
三、参数:Robots (机器人向导)

  说明:Robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。
  举例:<meta name="Robots" Content="All|None|Index|Noindex|Follow|Nofollow">
  提示:许多搜索引擎都通过放出robot/spider搜索来登录网站,这些robot/spider就要用到meta元素的一些特性来决定怎样登录。
  all:文件将被检索,且页面上的链接可以被查询;
  none:文件将不被检索,且页面上的链接不可以被查询;(和 “noindex, no follow" 起相同作用)
  index:文件将被检索;(让robot/spider登录)
  follow:页面上的链接可以被查询;
  noindex:文件将不被检索,但页面上的链接可以被查询;(不让robot/spider登录)
  nofollow:文件将不被检索,页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)
  例如:<META NAME="Robots" CONTENT="All">

四、参数:Author (作者)

  说明:标注网页的作者或制作组
  举例:<meta name="Author" Content="张三,www.uedcss.com“>
  提示:Content可以是:你或你的制作组的名字,或Email
  例如:<meta name="Author" Content="name,yehon@uedcss.com“>
  
五、参数:Copyright (版权)

  说明:标注版权
  举例:<meta name="Copyright" Content="本页版权归yehon所有。All Rights Reserved">
  提示:无
  例如:<META NAME="Copyright" CONTENT="本站版权归yehon版权所有。All Rights Reserved">
  
六、参数:Generator (编辑器)

  说明:编辑器的说明
  举例:<meta name="Generator" Content="PCDATA|FrontPage|">
  提示:Content="你所用编辑器"
  例如:<meta name="Generator" Content="PCDATA|FrontPage|">
  
七、参数:Language (语言)

  说明:网页语言的说明
  举例:<META NAME="Language" CONTENT="zh-CN">
  提示:无
  例如:<META NAME="Language" CONTENT="zh-CN">
  
八、参数:Designer(设计者)

  说明:网页设计者的说明
  举例:<META NAME="Designer" CONTENT="your name">
  提示:一般而言,发布者为个人信息
  例如:<META NAME="Designer" CONTENT="name">
  
九、参数:Publisher(发布者)

  说明:网站发布者的说明
  举例:<META NAME="Publisher" CONTENT="your name">
  提示:一般而言,发布者为发布公司信息
  例如:<META NAME="Publisher" CONTENT="web前端寒风">
  
十、参数:Title(主题)

  说明:网站主题说明
  举例:<META NAME="Title" CONTENT="your title">
  提示:通常这里的值是网页的内容标题
  例如:<META NAME="Title" CONTENT="银行卡快速导航">
  
十一、参数:Subject(内容的主题)

  说明:主要是指这篇文章的主题是什么,核心内容是什么。
  举例:<META NAME="Subject" CONTENT="your Subject">
  提示:无
  例如:<META NAME="Subject" CONTENT="网站前端_web前端寒风|优设前端">
  
十二、参数:Abstract(摘要)

  说明:网页页面说明
  举例:<META NAME="Abstract" CONTENT="本网站为学习点滴记录网站">
  提示:对页面内容进行简短的描述,常见于内容页面中,可以加强搜索引擎对页面内容的保存,便于用户搜索。
  例如:<META NAME="Abstract" CONTENT="本网站为学习点滴记录网站">
  
十三、参数:Expires(期限)

  说明:网页页面期限
  举例:<META NAME="Expires" CONTENT="time">
  提示:必须是GMT标准时间,定义过期时间,超过时间后即不能从cache中掉出。
  例如:<META NAME="Expires" CONTENT="Wed, 11 Feb 2010 00:51:09 EST">
  
十四、参数:Distribution(分配目标)

  说明:META NAME在那些页面有效
  举例:<META NAME="Distribution" CONTENT="Global">
  提示:是指网站都在哪些地区范围出现,一般设置为Global即为全球范围。
  例如:<META NAME="Distribution" CONTENT="Global">
  
十五、参数:Revisit-After(重访时间)

  说明:一般大型网站,蜘蛛爬行频率相当频繁,导致服务器重压。因此做这样的限制是让蜘蛛在限定日期内重访,例如7 days就是七天访问一次
  举例:<META NAME="Revisit-After" CONTENT="N Days">
  提示:是指网站都在哪些地区范围出现,一般设置为Global即为全球范围。
  例如:<META NAME="Revisit-After" CONTENT="7 days">

 2. 有没有在CSS3这些激动人心的新标签:

font-smooth:always;
-webkit-font-smoothing: antialiased;
还不是做了很多的测试和他们自己,虽然 CodeGo.net,他们几乎肯定不会得到什么好处的IE浏览器。可以在Windows或也许火狐虽然。上次我检查,它们会自动没有反锯齿小东西就像他们在OSX系统。 更新 这些都不是在IE或Firefox的支持。字体光滑标签仅适用于iOS的Safari浏览器,据我 
3. 哦,是的,您可以:
-webkit-font-smoothing: antialiased;
/* -moz-font-smoothing: antialiased; - No longer available in FF */
font-smoothing: antialiased;


3. 只能说是神器
   !function(){
            var scaleH=window.innerHeight / 516;
            var resizes = document.querySelectorAll('.resize');
            for (var j = 0; j < resizes.length; j++) {
                var  r=resizes[j];
                r.style.width = parseInt(r.style.width) * scaleW + 'px';
                r.style.height = parseInt(r.style.height) * scaleH + 'px';
                r.style.top = parseInt(r.style.top) * scaleH + 'px';
                r.style.left = parseInt(r.style.left) * scaleW + 'px';
            }
        }();


  var scaleW = window.innerWidth / 320;
        $("#viewport").attr('content', "width=320, initial-scale=" + scaleW + ", user-scalable=0");

 4. 自适应布局模式 (-webkit-box;)

  父级 display:-webkit-box;  -webkit-box-orient: horizontal;  (水平/垂直)

  子级: -webkit-box-flex: 1; (比例为1)

          -webkit-box-flex: 2; (比例为2)
          -webkit-box-flex: 3; (比例为3)

         平均分布。

5. 控制ios自动开启字母大写

  autocapitalize = "off"  关闭大写

6. 阻止IOS长按屏幕时的弹出菜单/保存图片

 -webkit-touch-callout: none;  (inherit 不被禁用)

7.  阻止IOS用户选择页面文字

 -webkit-user-select:none;

 

8. 设置链接获取焦点时的背景色

   -webkit-tap-highlight-color: rgba(0,0,0,.5);  (可一是一个透明色);

9. IOS中如何获取滚动条的值(android设备可以获取到值,但ios不能)

   可以通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。

 10. 移动端适配方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    iphone 3G  物理尺寸  屏幕密度ppi  像素分辨率px(320*480)  逻辑分辨率pt
    iphone4  (640*960)   
    iphone5  (640*1136)
    iphone5s  4 326 (640*1136) (326*568)
    iphone6  4.7 326 (750*1334) (375*667)
    iphone6Plus  5.5 401 (1242*2208)  (414*736) 
    ipad  (768*1024)
    ipad retina  (1536*2048)
    android  (480*800)
    android  (480*854)
    android  (540*960)
    android  (600*1024)
    android  (720*1280)
    android  (800*1280)
    android  (1048*1920)
    

    通常选择iphone6作为基准尺寸
    原因: 
        从中间尺寸向上和向下适配时调整的幅度最小;
    实现:
        文字流式(fluid)
        控件弹性(flexible)
        图片等比缩放(scale)



    @media 适配不同尺寸手机   (device-pixel-ratio 为设备像素与设备独立像素比 iphone6为2)

    @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */}
    @media only screen and (max-device-width :480px){ }
    @media only screen and (min-device-width :481px){ }

    /*6*/
    @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ }

    /*6+*/
    @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ }

    /*魅族*/
    @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ }

    /*mate7*/
    @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }

    /*4 4s*/
    @media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }


    
    根据不同设备宽度在根元素上设置不同字体大小
    一般会设置1rem为1/10屏幕宽度
    ;
    (function(win) {
        var doc = win.document;
        var docEl = doc.documentElement;
        var tid;

        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            if (width > 540) { // 最大宽度
                width = 540;
            }
            var rem = width / 10; // 将屏幕宽度分成10份, 1份为1rem
            docEl.style.fontSize = rem + 'px';
        }

        win.addEventListener('resize', function() {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }, false);
        win.addEventListener('pageshow', function(e) {
            if (e.persisted) {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);

        refreshRem();

    })(window);




    根据 devicePixelRatio 设定 initial-scale 来放大 viewport,使页面按照物理像素渲染,提升清晰度
    
    /**
     * MobileWeb 通用功能助手,包含常用的 UA 判断、页面适配、search 参数转 键值对。
     * 该 JS 应在 head 中尽可能早的引入,减少重绘。
     *
     * fixScreen 方法根据两种情况适配,该方法自动执行。
     *      1. 定宽: 对应 meta 标签写法 -- <meta name="viewport" content="target-densitydpi=device-dpi,width=750">
     *          该方法会提取 width 值,主动添加 scale 相关属性值。
     *          注意: 如果 meta 标签中指定了 initial-scale, 该方法将不做处理(即不执行)。
     *      2. REM: 不用写 meta 标签,该方法根据 dpr 自动生成,并在 html 标签中加上 data-dpr 和 font-size 两个属性值。
     *          该方法约束:IOS 系统最大 dpr = 3,其它系统 dpr = 1,页面每 dpr 最大宽度(即页面宽度/dpr) = 750,REM 换算比值为 16。
     *          对应 css 开发,任何弹性尺寸均使用 rem 单位,rem 默认宽度为 视觉稿宽度 / 16;
     *              scss 中 $ppr(pixel per rem) 变量写法 -- $ppr: 750px/16/1rem;
     *                      元素尺寸写法 -- html { font-size: $ppr*1rem; } body { width: 750px/$ppr; }。
     */
    window.mobileUtil = (function(win, doc) {
        var UA = navigator.userAgent,
            isAndroid = /android|adr/gi.test(UA),
            isIos = /iphone|ipod|ipad/gi.test(UA) && !isAndroid, // 据说某些国产机的UA会同时包含 android iphone 字符
            isMobile = isAndroid || isIos;  // 粗略的判断

        return {
            isAndroid: isAndroid,
            isIos: isIos,
            isMobile: isMobile,

            isNewsApp: /NewsApp\/[\d\.]+/gi.test(UA),
            isWeixin: /MicroMessenger/gi.test(UA),
            isQQ: /QQ\/\d/gi.test(UA),
            isYixin: /YiXin/gi.test(UA),
            isWeibo: /Weibo/gi.test(UA),
            isTXWeibo: /T(?:X|encent)MicroBlog/gi.test(UA),

            tapEvent: isMobile ? 'tap' : 'click',

            /**
             * 缩放页面
             */
            fixScreen: function() {
                var metaEl = doc.querySelector('meta[name="viewport"]'),
                    metaCtt = metaEl ? metaEl.content : '',
                    matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
                    matchWidth = metaCtt.match(/width=([^,\s]+)/);

                if ( !metaEl ) { // REM
                    var docEl = doc.documentElement,
                        maxwidth = docEl.dataset.mw || 750, // 每 dpr 最大页面宽度
                        dpr = isIos ? Math.min(win.devicePixelRatio, 3) : 1,
                        scale = 1 / dpr,
                        tid;

                    docEl.removeAttribute('data-mw');
                    docEl.dataset.dpr = dpr;
                    metaEl = doc.createElement('meta');
                    metaEl.name = 'viewport';
                    metaEl.content = fillScale(scale);
                    docEl.firstElementChild.appendChild(metaEl);

                    var refreshRem = function() {
                        var width = docEl.getBoundingClientRect().width;
                        if (width / dpr > maxwidth) {
                            width = maxwidth * dpr;
                        }
                        var rem = width / 16;
                        docEl.style.fontSize = rem + 'px';
                    };

                    win.addEventListener('resize', function() {
                        clearTimeout(tid);
                        tid = setTimeout(refreshRem, 300);
                    }, false);
                    win.addEventListener('pageshow', function(e) {
                        if (e.persisted) {
                            clearTimeout(tid);
                            tid = setTimeout(refreshRem, 300);
                        }
                    }, false);

                    refreshRem();
                } else if ( isMobile && !matchScale && ( matchWidth && matchWidth[1] != 'device-width' ) ) { // 定宽
                    var    width = parseInt(matchWidth[1]),
                        iw = win.innerWidth || width,
                        ow = win.outerWidth || iw,
                        sw = win.screen.width || iw,
                        saw = win.screen.availWidth || iw,
                        ih = win.innerHeight || width,
                        oh = win.outerHeight || ih,
                        ish = win.screen.height || ih,
                        sah = win.screen.availHeight || ih,
                        w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah),
                        scale = w / width;

                    if ( scale < 1 ) {
                        metaEl.content = metaCtt + ',' + fillScale(scale);
                    }
                }

                function fillScale(scale) {
                    return 'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale;
                }
            },

            /**
             * 转href参数成键值对
             * @param href {string} 指定的href,默认为当前页href
             * @returns {object} 键值对
             */
            getSearch: function(href) {
                href = href || win.location.search;
                var data = {},reg = new RegExp( "([^?=&]+)(=([^&]*))?", "g" );
                href && href.replace(reg,function( $0, $1, $2, $3 ){
                    data[ $1 ] = $3;
                });
                return data;
            }
        };
    })(window, document);

    // 默认直接适配页面
    mobileUtil.fixScreen();
</body>
</html>
View Code

 

 

待续……

 
posted @ 2015-07-09 11:47  范小武  阅读(878)  评论(0编辑  收藏  举报