h5 | 迪拜de天空-触手可及的天空之城

web

发布日期: 2017-12-06

禁止文字缩放

-webkit-text-size-adjust：100%；

参考：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配置参考：

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}}

屏幕旋转的事件和样式

事件

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;
}
}

//竖屏时使用的样式

	@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——当手指离开屏幕时触发