移动端杂记

1.页面首部要加的meta标签　

<meta name="viewport" content="width=device-width,user-scalable=no"/>
<!--
	viewport 视口（可视区窗口）
		默认不设置viewport一般可视区宽度在移动端是980
		width可视区的宽度（number||device-width）
		user-scalable是否容许用户缩放(yes||no) iOS10无效（用事件解决）
		initial-scale初始缩放比例
		minimum-scale最小缩放比例
		maximum-scale最大缩放比例
		devicePixelRatio像素比
		设计图最少要750的尺寸
-->

<!--QQ强制横屏或者竖屏
portrait 竖屏
landscape 横屏
x5浏览器：qq浏览器、微信 qq内置浏览器
-->

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

<!--QQ设置全屏-->
<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="telephone=no,email=no"/>

<!--
拨打电话和发邮件
href='tel:'
href='mailto:'
-->

<a href="tel:188888888">请拨打电话188888888</a>
<a href="mailto:1057889038@qq.com">发邮件</a>

2.默认样式及一些兼容性问题

/*
	 默认样式
	 1.a、input、button点击时的默认阴影样式
	 	清除点击阴影-webkit-tap-highlight-color
	 2.消除按钮圆角-webkit-appearance
	 3.选中文字设置-webkit-user-select
	 4.禁止文字缩放-webkit-text-size-adjust
	 5.默认字体设置Helvetica
	 
	 6.其他问题
	 （1）Font Boosting 在一段文字我们没有给它设置高度的时候，
	 	在webkit内核下，文字的大小被浏览器放大了
	 		解决方法：
	 			a.设置高度
	 			b.设置最大高度
	 （2）固定定位fixed兼容性问题
	 		js解决
	 （3）IOS的body的overflow问题
	 	解决：在页面最外层包一层div
	 * */
	body{
		font-family: helvetica;
	}
	body *{
		/*禁止用户设置字体大小*/
		-webkit-text-size-adjust:100%;
	}
	a,input,button{
		-webkit-tap-highlight-color:rgba(0,0,0,0) ;
	}
	input,button{
		-webkit-appearance:none;
		border-radius: 0;
	}

　3.适配

　

/*
	1.百分比适配
		百分比布局一般宽度百分比，高度还是固定值
		缺点：高度不好计算
	2.viewport适配
		<meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"/>
	3.rem适配
	4.弹性盒模型（box版和flex版）
 * */

4.设置默认字体大小

<script type="text/javascript">
	//获取像素比
	var pixelRatio = 1 / window.devicePixelRatio;
	var html=document.documentElement;
	//通过js动态设置视口(viewport)
    	document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixelRatio+',minimum-scale='+pixelRatio+',maximum-scale='+pixelRatio+'" />');
	//设置字体大小
	//html.style.fontSize=设置图宽度/任意数值；
	html.style.fontSize=html.clientWidth/25+'px';
</script>