移动端基础

1、视口：width可视区的宽度（number || device-width）

viewport 视口（可视区窗口）

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

<meta name="viewport" content="width=device-width">

2、是否允许用户缩放（yes || no）-----IOS10无效，使用事件来解决

<meta name="viewport" content="user-scalable=no">

 

3、初始缩放比例，最小缩放比例，最大缩放比例 

<meta name="viewport" content="initial-scale=.5,minimum-scale=.5,maximum-scale=1">

 

4、像素比：把一个像素放大至N个像素去显示

设计图最少750

alert(window.devicePixelRatio)

 

例子：

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

其中width=device-width 是设置视窗宽度为设备视窗宽度，还可以固定宽度，例如：width=640 则是640px的宽度（常见于微信）；

initial-scale=1.0 ： 设置缩放比例为1.0；

minimum-scale=1.0 和 maximum-scale=1.0 ： 最小缩放比例和最大缩放比例；

user-scalable=no ： 禁止用户自由缩放，user-scalable 默认值为 yes。

提示：一般常用的，有 user-scalable=no 就不用使用 minimum-scale=1.0 和 maximum-scale=1.0 来强制禁止缩放了。

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

 

5、自动识别格式

<meta name="format-datection" content="telephone=no"/>

content 里面的参数：telephone=no 是禁止浏览器自动识别手机号码，email=no 是禁止浏览器自动识别Email。

 

6、完整模板

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>

 

7、强制用户只能横屏或竖屏浏览

<meta name="x5-orientation" content="protrait" />       x5浏览器强制横屏

<meta name="x5-fullscreen" content="true" />       x5浏览器强制全屏

<meta name="screen-orientation" content="landscape" />       uc浏览器强制竖屏

<meta name="full-screen" content="true" />       uc浏览器强制全屏

只有这两种内核的浏览器可以，其他浏览器如果想要，需要在陀螺仪操作

 

8、调用打电话功能and发送邮件

<a href="tel:18033332222">请拨打电话：18033332222</a>

<a href="mailto:417703682@qq.com">请发送邮件</a>

 

9、清除高亮显示

/* 清除高亮显示 */
a, input, button{
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

 

10、清除默认圆角

/* 清除默认圆角 */
input, button{
    -webkit-appearance: none;
    border-radius: 0;
}

 

11、默认字体

移动端大部分设备没有宋体和微软雅黑

body{
    font-family: Helvetica;
}

 

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

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

 

13、Font Boosting 有时候出现

    在一段文字我们没有给他设置高度的时候

    在webkit内核下，文字的大小被浏览器放大了

    解决办法：

        1、设置高度

        2、设置最大高度 max-height

 

14、使用js制作移动端自适应屏幕尺寸（viewport适配）

(function(){
    var w = window.screen.width;
    var targetW = 320; // 将屏幕尺寸固定为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 + "";
    document.head.appendChild(meta);
})();

 

15、rem适配

// 假定设计图为750px，那么此时100%width为15rem，1rem为50px
(function(){
    var html = document.documentElement;
    var hWidth = html.getBoundingClientRect().width;
    html.style.fontSize = hWidth / 15 + "px";
})();

// index.scss中
$r:50;
#header{
    /* 设计图上的高度是103px */
    height: 103/$r rem;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/haishen/p/9515092.html