01移动端基本环境和常见问题

一、chrome模拟器（只是模拟尺寸，最终还是需要真机测试）

     1、F12手机模拟（emulation）

     2、选择或者添加模拟设备

 

二、本地服务区xampp

     1、安装本地服务器环境xampp并启动

     2、电脑IP和手机IP需要一样（连在同一个网络下）

 

三、视口设置

     默认不设置viewport一般可视区宽度在移动端是980px

     width 可视区宽度（number || device-width）     安卓对number支持性不好，所以一般用device-width（设备宽度）

     user-scalable 用户是否可缩放（yes || no）     IOS10无效（用事件解决）

     initial-scale 初始比例（元素缩放（实际是窗口尺寸缩放）），注意：一定要和minimum-scale保持一致，否则minimum无意义

     minimum-scale 最小缩放比例

     maximum-scale 最大缩放比例

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

 

四、像素比：将一个像素放大成N个像素显示

     1、window.devicePixelRatio     //只能获取，不能设置

     2、设计图至少 720px，否则图片发虚

 

五、常用meta设置

     注：一下只有X5内核或者UC能设置有效，IOS、Android原生无效

     1、QQ强制横屏或竖屏     x5-orientation（portrait || landscape）

<meta name="x5-orientation" content="portrait">

 

     2、QQ设置全屏     x5-fullscreen

<meta name="x5-fullscreen" content="true">

 

     3、UC强制横屏或竖屏     screen-orientation（portrait || landscape）

<meta name="screen-orientation" content="portrait">

 

     4、UC全屏     full-screen（yes || no）

<meta name="full-screen" content="yes">

 

     5、禁止识别电话号码和邮箱号码（移动端默认会自动识别规定数字为电话号或者邮箱）

<meta name-"formate-detection" content="telephone=no, email=no"> 
 
=======================================================================
<a href="tel:15700000000">请拨打15700000000</a>     //特殊需要识别手机并跳转
<a href="mailto:1770000000@qq.com">请发送邮箱</a>     //特殊需要识别邮箱并跳转

 

六、清除默认样式

     1、清除点击阴影

a,input,button{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

 

     2、清除圆角

input,button{
    -webkit-appearance: none;
    border-radius: 0;
}

 

     3、设置默认字体（移动端大多没有PC中常用的宋体/微软雅黑）

body{
    font-family: Helvatica;
}

 

     4、禁止用户修改字体大小

body *{
    -webkit-text-size-adjust: 100%;
}

 

     5、选中文字设置（移动端有长按选中文字功能）     ----》IOS有效，但是其他设备可能失效，事件中解决（处理长按文字选中或者出现右侧菜单事件）

body *{
    -webkit-user-select: none;     /*设置为不能选中*/
}

 

七、移动端其他问题

     1、font-Boosting     在一段没有设置高度的文字中，webkit 内核下，文字大小会被浏览器放大

          解决办法：1、设置高度     2、设置最大高度max-height

 

     2、fixed

          解决办法：1、不用固定定位     2、事件解决

     

     3、IOS中，body overflow: hiden;横向失效（仍然可以有横向滚动条）

          解决办法：将body中的overflow改成用div包住，并在div中设置overflow

     

八、适配

     1、百分比（一般高度不设置百分比《有必要时设置固定高度》，因为百分比是参照父级）

 

     2、viewport适配

(function() {
    var w = window.screen.width;
    var targetW = 320;
    var scale = w / targetW;
    var meta = document.createElement('meta');
    meta.name = 'viewport';
    meta.content = 'user-scalable=no,initial-scale=' + scale + ',minimum-scale=' + scale + ',maximum-scale=' + scale + '';
    document.head.appendChild(meta);
})();

     

　3、弹性盒模型

     display: flex | box

 

 

     下章节续......