移动端基本环境
viewport 视口
可视区窗口
默认不设置, 一般可视区宽度在移动端是980
参数:
- width: 可视区的宽度 (number||device-width(设备宽度))
使用number在安卓下有问题
- user-scalable: 是否允许用户缩放 (yes||no)
这个参数在ios10下无效
- initial-scale 初始缩放比例
- minimum-scale 最小缩放比例
- maximum-scale 最大缩放比例
单独设置initial-scale没有作用, 还必须设置minimum-scale，maximum-scale与initial-scale的值相同
（另外在测试的时候，ios下，修改initial-scale之后，必须要重开网页才有效， 刷新无效）
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1">
devicePixelRatio 像素比
把一个像素 放大至 N个像素去显示(N就是我们像素比的值)
举个例子:
如果像素比为2
<div style="width: 10px;height: 5px;background: black"></div>
那么，我们div实际所占的物理像素为20*10
我的电脑像素比是1.25
console.log(window.devicePixelRatio);//1.25
同样是上面的html代码, 显示出来截图后再ps测量, div宽为13像素(101.25=12.5)， 高为6像素(51.25=6.25), 因为显示最小单位就是一个像素， 所以0.5也会被当做一个像素
如果改为:
<div style="width: 100px;height: 100px;background: black"></div>
测量结果为宽为125像素, 高为125像素
像素比应该是设备属性, 尝试修改（没有效果）：
window.devicePixelRatio=3
另外: 放大或缩小网页，会改变像素比
在移动端的物理分辨率实际已经非常大了， iphone6的分辨率为(4.7英寸1334x750)
如果没有像素比， 你的正常显示在pc的网页， 在移动端会非常小
移动端的像素比一般都是大于1的， iphone6的像素就是2， 所以在iphone6中window.innerWidth的值为375, 正好为物理分辨率的一半
有时我们查看screen.width属性和我们电脑的设置的分辨率不一样， 也是这个原因
我的电脑的分辨率设置为: 1920*1080
但是我的screen.width和screen.height为:
screen.width;//1536
screen.height;//864
因为我的devicePixelRatio像素比为1.25
1536*1.25;//1920
864*1.25;//864
注意:
在移动端, 图片的分辨率相应要比pc的图片要大， 不然就会出现图片发虚
和移动端相关的其他meta属性
x5内核的浏览器：qq浏览器已经qq微信内置浏览器
x5内核的浏览器强制横屏或竖屏显示
<meta name="x5-orientation" content="portrait|landscape">
landscape(（文件的）横向打印格式)
x5内核的浏览器设置全屏
<meta name="x5-fullscreen" content="true"/>
uc强制横屏或竖屏显示
<meta name="screen-orientation" content="portrait|landscape">
uc设置全屏
<meta name="full-screen" content="yes"/>
禁止识别电话号码和邮件地址
<meta name="format-detection" content="telphone=no,email=no">
默认的， 在移动端， 如果出现数字(电话号码)或邮件格式的字符串，点击会唤起打电话或发生邮件功能
<p>13000000000</p>
<p>xxx@qq.com</p>
可以通过<meta name="format-detection" content="telphone=no,email=no">来禁止
如果需要使用这个特性， 可以通过a标签明确指定
<a href="tel:13000000000">13000000000</a>
<a href="mailto:xxx@qq.com">xxx@qq.com</a>
移动的一些问题
默认样式
清除点击阴影 -webkit-tap-highlight-color
在移动端， 默认按钮和a标签等点击会有黑色阴影
<style>
button, a, input{
/*-webkit-tap-highlight-color: red;*/
-webkit-tap-highlight-color: transparent;
}
</style>
<a href="">sadfsadfsadf</a>
消除按钮圆角 -webkit-appearance
在iphone中， 按钮默认是有圆角的， 不能通过设置border-radius消除
还需要设置-webkit-appearance: none
button{
-webkit-appearance: none;
border-radius: 0;
}
选中文字设置 -webkit-user-select
body *{
-webkit-user-select: none;
}
禁止文字缩放 -webkit-text-size-adjust
body *{
-webkit-text-size-adjust: 100%;
}
在移动端， 用户通常可以设置显示字体的大小，
加上上面的这句话了， 就可以禁止用户调整字体大小
默认字体设置 Helvetica
我们通常设置字体为宋体或微软雅黑， 但移动端大部分都没有这两种字体，
Helvetica这种字体是都有的，但它是英文字体， 中文字体用默认的就好
其他的问题
Font Boosting
在一段文字我们没有给他设置高度的时候，在webkit内核下，文字的大小被浏览器放大了
(可能会遇到， 并不是每次都会遇到)
产生原因: -webkit的人性化设置， 防止字体太小不好看
<style type="text/css">
#p1 {
font-size: 18px;
line-height: 30px;
height: 30px;
}
#p2 {
font-size: 18px;
line-height: 30px;
}
</style>
<p id="p1">我是文字呦~~</p>
<!-- p2的字可能会变得很大 -->
<p id="p2">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
解决办法:
1.设置高度
2.设置最大高度 max-height
fixed 固定定位
在移动端，尽量不要固定定位
可以使用绝对定位模拟固定定位
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
overflow: hidden;
position: relative;
}
body{
height: 100%;
overflow: auto;
}
header{
height: 100px;
width: 100%;
background: red;
position: absolute;
top: 0;
}
</style>
<header></header>
<section>
<p>001</p>
<p>002</p>
....
<p>099</p>
</section>
这种做法的问题:
- header会遮盖滚动条
- 滚动不流畅， 会比较卡
html上的overflow:hidden问题
如果把header的width改为200%;
header{
height: 100px;
width: 200%;
background: red;
position: absolute;
top: 0;
text-align: center;
}
使用ios下测试， 页面的宽度会被header撑开, 造成可以横向滑动的效果
但是我们设置了html的overflow: hidden, 超出的部分应该隐藏才对
这ios下的一个问题, 在html上设置overflow: hidden没有效果
解决办法：
设置相对于body定位
那我们就需要在加一层div
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
overflow: hidden;
}
body{
height: 100%;
overflow: hidden;
position: relative;
}
#wrap{
height: 100%;
overflow: auto;
}
header{
height: 100px;
width: 200%;
background: red;
position: absolute;
top: 0;
text-align: center;
}
</style>
不同屏幕的适配
移动端的屏幕分辨率很多， 不可能为每种单独写样式
所以我们需要一些适配的方案
百分比适配
百分比适配可以很好解决宽度的适配， 高度的适配就不是那么理想了
一个例子: 将四个div横排平均占满整个屏幕
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 25%;
height: 100px;
float: left;
background: #777;
}
div:nth-child(1){
background: #111;
}
div:nth-child(2){
background: #222;
}
div:nth-child(3){
background: #333;
}
</style>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
viewport适配
我们知道，我们其实可以指定视口的宽度，我们如果可以将视口设置成一个固定的值
则我们的网页就可以基于一个分辨率来设计
<meta name="viewport" content="width=320">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
/*width: 25%;*/
width: 80px;
height: 100px;
float: left;
background: #777;
}
div:nth-child(1){
background: #111;
}
div:nth-child(2){
background: #222;
}
div:nth-child(3){
background: #333;
}
</style>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
但是<meta name="viewport" content="width=320">width为number在安卓下不支持
所以我们可以通过计算设置initial-scale的，实际上改的也是width的值
举个例子，如果你的设备的device-width为360px(这里的px指定的css的像素，而不是物理像素), 我的网页的宽为320px,
则我们需要放大我们的网页（移动端对缩放的处理实际上是放大和缩小视口的大小，放大网页实际上是通过缩小我们的视口来实现的， 因为我们的设备大小是固定的， 视口越小， 则每个css像素就越大 ）
则我们的initial-scale应该为device-width/320 (360/320==1.125)
<meta name="viewport" content="width=device-width,initial-scale=1.125,minimum-scale=1.125,maximum-scale=1.125">
注意：initial-scale minimum-scale maximum-scale 都必须写， 单写initial-scale是没有作用的
对于不同的设备， 我们可以通过计算
<script>
(function(){
//设备宽度
var deviceW = window.screen.width;
//网页宽度
var w = 320;
//缩放比例
var scale = deviceW/w;
var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=device-width,initial-scale='+scale+',minimum-scale='+scale+',maximum-scale='+scale;
document.head.appendChild(meta);
})();
</script>
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.125,minimum-scale=1.125,maximum-scale=1.125"> -->
rem适配
rem是css的长度单位, 1rem为html元素的font-size的大小, r代表的是root(可以理解为我们的html)
*{
margin: 0;
padding: 0;
}
html{
font-size: 20px;
}
div{
height: 5rem;/* 100px */
width: 5rem;/* 100px */
background: red;
}
利用rem做移动端的适配
<script>
var html = document.documentElement;
var htmlW = html.clientWidth;
html.style.fontSize = htmlW/16 + 'px';//屏幕被分成了16份 1rem就是一份
</script>
<style>
*{
margin: 0;
padding: 0;
}
html{
font-size: 20px;
}
div{
float: left;
height: 4rem;
width: 4rem;
background: red;
}
div:nth-of-type(1){
background: #111;
}
div:nth-of-type(2){
background: #222;
}
div:nth-of-type(3){
background: #333;
}
div:nth-of-type(4){
background: #444;
}
</style>
<div></div>
<div></div>
<div></div>
<div></div>
