目录

h5

禁止文字缩放

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
-webkit-text-size-adjust100%

参考https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent

禁止ios 长按时不触发系统的菜单禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}

禁止ios和android用户选中文字

.css{-webkit-user-select:none}

移动端点击时的阴影

  • -webkit-tap-highlight-color:rgba(0,0,0,0);

rem配置参考:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
html{font-size:10px}

@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}

@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}

@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}

@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}

@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

@media screen and (min-width:800px){html{font-size:25px}}

屏幕旋转的事件和样式

事件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
	window.orientation取值正负90表示横屏模式0和180表现为竖屏模式
	window.onorientationchange = function(){
	switch(window.orientation){
	case -90:
	case 90:
	alert("横屏:" + window.orientation);
	case 0:
	case 180:
	alert("竖屏:" + window.orientation);
	break;
	}
	}

//竖屏时使用的样式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
	@media all and (orientation:portrait) {
	.css{}
	}

//横屏时使用的样式
	@media all and (orientation:landscape) {
	.css{}
	}
audio元素和video元素在ios和andriod中无法自动播放
应对方案触屏即播

	$('html').one('touchstart',function(){
	audio.play()
	})

禁用 radio 和 checkbox 默认样式

  • ms-check 适用于表单复选框或单选按钮默认图标的修改,同样有多个属性值,设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。 input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;}

移动端touch事件(区分webkit和winphone)

/* 当用户手指放在移动设备在屏幕上滑动会触发的touch事件 */ // 以下支持webkit touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指 touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动 touchend——当手指离开屏幕时触发 touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用

//TouchEvent说明: touches:屏幕上所有手指的信息 targetTouches:手指在目标区域的手指信息 changedTouches:最近一次触发该事件的手指信息 touchend时,touches与targetTouches信息会被删除,changedTouches保存的最后一次的信息,最好用于计算手指信息

//参数信息(changedTouches[0]) clientX、clientY在显示区的坐标 target:当前元素

//事件响应顺序 ontouchstart > ontouchmove > ontouchend > onclick

// 以下支持winphone 8 MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指 MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生:阻止页面滚动 MSPointerUp——当手指离开屏幕时触发

手机拍照和上传图片

//IOS有拍照、录像、选取本地图片功能,部分Android只有选择本地图片功能。Winphone不支持