web移动端周末

最新推荐文章于 2023-04-11 19:32:41 发布

风软一江水i

最新推荐文章于 2023-04-11 19:32:41 发布

阅读量132

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_40104992/article/details/90348775

博客提供了移动端.viewport模板，探讨了移动端字体单位px和rem的选择及rem配置。还介绍了移动端touch事件，包括webkit和winphone的区分、事件触发情况，指出移动端click有200 - 300ms延迟并给出解决办法，最后说明了取消touch高亮效果的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.viewport模板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>标题</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
这里开始内容
</body>
</html>

移动端字体单位font-size选择px还是rem

rem配置参考：
html {font-size:10px}
@media screen and (min-width:480px) 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) and (max-width:959px) {
html {
      font-size: 25px
}
}
@media screen and (min-width:960px) and (max-width:1079px) {
html {
      font-size: 30px
}
}
@media screen and (min-width:1080px) {
html {
      font-size: 32px
}
}

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

移动端click屏幕产生200-300 ms的延迟响应

移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。

解决延迟方案：
fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序
1、ontouchstart
2、ontouchmove
3、ontouchend
4、onclick
解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应

移动端取消touch高亮效果

在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来进行全局的禁止：
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}