移动端适配方案

Media Queries

meida queries 主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  /*你的css代码*/
}

优点

• media query可以做到设备像素比的判断，方法简单，成本低，特别是对移动和PC维护同一套代码的时候
• 调整屏幕宽度的时候不用刷新页面即可响应式展示

缺点

• 代码量比较大，维护不方便
• 为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源
• 为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

Flex弹性布局

详见本章节：flex布局

rem

rem布局使我们现在项目开发非常常用的一种布局方式，他通过和流式布局搭配使用，rem布局可以让图标图片文字，在不同的屏幕下显示正常的比例，rem现在使用度很高

rem 属于一个单位，在设置完根元素的像素之后，rem就属于固定的像素单位了

在浏览器当中默认的 1rem = 16px

rem的值

目前有两种，一种是根据js来调整html的字号，另一种则是通过媒体查询来调整字号。

• js

(function () {
        window.addEventListener('resize',size,false);
        size()
        function size() {
           var winW=document.documentElement.clientWidth||document.body.clientWidth;
            document.documentElement.style.fontSize=winW/750*100+'px'
        }
    })()

winW=750宽度的话，根元素=》100px,
iphone 5 winW=640 根元素=》85.3px

• css

  我们知道html的默认字号是16px，则对应的设备下可以通过设置对应的font-size使其有一致的缩放比例。

    html {
            font-size: 100px;
        }

        @media only screen and (min-width: 320px) and (max-width: 479px) {
            html {
                font-size: 42.67px !important;
            }
        }

        @media only screen and (min-width: 480px) and (max-width: 639px) {
            html {
                font-size: 64px !important;
            }
        }

        @media only screen and (min-width: 640px) and (max-width: 749px) {
            html {
                font-size: 85.34px !important;
            }
        }

        @media only screen and (min-width: 750px) and (max-width: 959px) {
            html {
                font-size: 100px !important;
            }
        }

移动端事件

• click：单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟
• touchstart：手指触摸到屏幕会触发
• touchmove：当手指在屏幕上移动时，会触发
• touchend：当手指离开屏幕时，会触发
• touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件
• tap: 手指碰一下屏幕会触发
• longTap: 手指长按屏幕会触发
• singleTap: 手指碰一下屏幕会触发
• doubleTap: 手指双击屏幕会触发
• swipe：手指在屏幕上滑动时会触发
• swipeLeft：手指在屏幕上向左滑动时会触发
• swipeRight：手指在屏幕上向右滑动时会触发
• swipeUp：手指在屏幕上向上滑动时会触发
• swipeDown：手指在屏幕上向下滑动时会触发

移动端常见问题

• 一些情况下对非可点击元素(label，span)监听点击事件，不会再IOS下触发，css增加cursor:pointer
• click300ms延迟响应，使用Fastclick、禁用双击缩放、zepto的tag事件
• ios设置input按钮样式会被默认样式覆盖，可以将默认样式设置为none
• ios键盘字母输入，默认首字母大写，input中加入autocapitalize=‘off’
• 移动端点透问题，尽量都使用touch事件来替换click事件。例如touchend事件(推荐)，用fastclick
• 滑动卡顿，解决：-webkit-overflow-scrolling:touch；
• 默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能
• 长时间按住页面出现闪退，element{-webkit-touch-callout：none}
• iphone及ipad下输入框默认内阴影，element{-webkit-appearance:none}
• 旋转屏幕时，字体大小调整问题，html，body，from，fieldset，p，div,h1,h2,h3,h4,h5,h6{-webkit-text-size-adjust:100%}

webApp与响应式的区别

meat标签讲解

<meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

• name="viewport" :视口
• width=device-width ：屏幕的宽度=设备的宽度
• user-scalable=no ：是否允许用于缩放
• initial-scale=1.0 ：初始缩放值1:1
• maximum-scale=1.0 ：最大的缩放值1:1
• minimum-scale=1.0" : 最小的缩放值1:1

h5深度剖析

原文：https://www.cnblogs.com/mengxiangji/p/10934237.html