Touch
1.touchstart:当手指触碰屏幕时候发生。不管当前有多少只手指。
2.touchmove:当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动。
3.touchend:当手指离开屏幕时触发。
4.touchcancel:系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用。
5触摸事件的响应顺序:
(1)ontouchstart
(2)ontouchmove
(3)ontouchend
(4)onclick 300ms延时
Event
1.originalEvent (原生事件) 是jquery 封装的事件。
2.targetTouches 目标元素的所有当前触摸 。
3.changedTouches 页面上最新更改的所有触摸。
4.touches 页面上的所有触摸。
clientX、clientY 相对于当前屏幕的X或Y位置
pageX、pageY 相对于整体页面的X或Y位置
transitionEnd 过渡结束事件。
animationEnd 动画结束事件
百度禁止转码
<meta http-equiv="Cache-Control" content="no-siteapp" />
关闭电话号码的自动识别:
<meta name="format-detection" content="telephone=no" />
开启电话功能
<a href="tel:123456">123456</a>
开启短信功能:
<a href="sms:123456">123456</a>
邮箱的自动识别:
<meta content="email=no" name="format-detection" />
同样地,我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能:
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
ios用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0,也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩。
{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
webkit表单元素的默认外观重置:
.css{-webkit-appearance:none;}
当移动设备横竖屏切换时,文本的大小会重新计算(或者在内嵌浏览器中设置字体的大小),进行相应的缩放,当我们不需要这种情况时,可以选择禁止:
html {-webkit-text-size-adjust: 100%;}
移动端禁止选中内容:
.user-select-none { -webkit-user-select: none;}
禁止保存或拷贝图像(ios):
img { -webkit-touch-callout: none; }
摇一摇功能:
HTML5 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。
android 上去掉语音输入按钮:
input::-webkit-input-speech-button {display: none}
box-sizing:
*,::before,::after{
-webkit-box-sizing: border-box;
}
1.有最大、最小宽度的百分比自适应布局
适用场景:门户网站首页,图片较多的首页。
2.百分比自适应布局
适用场景:信息文字较多的网页,内容较多网页。
3.全屏自适应布局
适用场景:单页面网页,移动web app 页面。
1.touchstart:当手指触碰屏幕时候发生。不管当前有多少只手指。
2.touchmove:当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动。
3.touchend:当手指离开屏幕时触发。
4.touchcancel:系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用。
5触摸事件的响应顺序:
(1)ontouchstart
(2)ontouchmove
(3)ontouchend
(4)onclick 300ms延时
Event
1.originalEvent (原生事件) 是jquery 封装的事件。
2.targetTouches 目标元素的所有当前触摸 。
3.changedTouches 页面上最新更改的所有触摸。
4.touches 页面上的所有触摸。
clientX、clientY 相对于当前屏幕的X或Y位置
pageX、pageY 相对于整体页面的X或Y位置
transitionEnd 过渡结束事件。
animationEnd 动画结束事件
百度禁止转码
<meta http-equiv="Cache-Control" content="no-siteapp" />
关闭电话号码的自动识别:
<meta name="format-detection" content="telephone=no" />
开启电话功能
<a href="tel:123456">123456</a>
开启短信功能:
<a href="sms:123456">123456</a>
邮箱的自动识别:
<meta content="email=no" name="format-detection" />
同样地,我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能:
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
ios用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0,也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩。
{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
webkit表单元素的默认外观重置:
.css{-webkit-appearance:none;}
当移动设备横竖屏切换时,文本的大小会重新计算(或者在内嵌浏览器中设置字体的大小),进行相应的缩放,当我们不需要这种情况时,可以选择禁止:
html {-webkit-text-size-adjust: 100%;}
移动端禁止选中内容:
.user-select-none { -webkit-user-select: none;}
禁止保存或拷贝图像(ios):
img { -webkit-touch-callout: none; }
摇一摇功能:
HTML5 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。
android 上去掉语音输入按钮:
input::-webkit-input-speech-button {display: none}
box-sizing:
*,::before,::after{
-webkit-box-sizing: border-box;
}
1.有最大、最小宽度的百分比自适应布局
适用场景:门户网站首页,图片较多的首页。
2.百分比自适应布局
适用场景:信息文字较多的网页,内容较多网页。
3.全屏自适应布局
适用场景:单页面网页,移动web app 页面。