移动端相对于PC端异同

最新推荐文章于 2021-07-06 10:47:00 发布

kikpin

最新推荐文章于 2021-07-06 10:47:00 发布

阅读量505

点赞数

分类专栏：移动端文章标签：移动端

移动端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

移动端相对于PC端异同

总结：

兼容问题：大部分手机浏览器webkit内核，主要是手机分辨率、操作系统的差异的兼容问题处理；
触摸事件的处理，手机虚拟键盘的处理
自适应布局：em，rem，vw的使用，以及根字体大小的响应式处理；
移动端动画特效处理
主流生态圈：小程序
LBS：百度地图的API
移动开发库：zepto的掌握
一套前端开发框架：模块化，打包，压缩，缓存，发布，自动化测试fis；

视口

移动端：layout viewport布局视口、visual viewport视觉视口、ideal viewport理论视口；

视口规范：

//视口
<meta name="viewport" content="width=device-width,initial-scal=1.0,maximum-scale=1.0,user-scalable=no">
//最新，避免IE使用兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
//双核，使用webkit内核(Safari,Chrome)
<meta name="renderer" content="webkit">

视口单位：

vw：视口宽度百分比，1vw = 视口宽度1%
vh：对口高度百分比
vmin：选取vw和vh中最小的
vmax：选取vw和vh中最大的

body和HTML:root设置font-size：
html{font-size=62.5%;}
body{font-size:14px;font-size:1.4rem;}
h1{font-size:24px;font-size:2.4rem}
JS控制HTML字体大小初始化，放在HEAD，使用REM单位；
媒体查询15px开始；Chrome的font-size小于12时候，以12计算；
谷歌基于webkit的fork web渲染引擎：blink引擎；

事件

手势事件（单个手指）：touchstart => touchmove =>touchend/touchcancel
触摸事件（两个手指）：gesturestart => gesturechange => gestureend
屏幕旋转事件：onorientationchange
检测触摸屏幕的手指何时改变方向：orientationchange
zepto.js的tap事件，是通过touch模拟的click事件，“捕获”BUG是否修正？
使用封装的tap事件代替click事件：click => dbclick(300ms判断时间)，解决延迟问题
模拟:hover伪类：ontouchstart => onmouseover;ontouchend => onmouseout，移动端没有hover事件，只能JS增删class样式模拟；少用:hover伪类，通过增删class修改样式；
取消webkit浏览器点击链接或按钮的默认颜色变化：-webkit-tap-highlight-color:rgba(0,0,0,0)
安卓click事件阻塞页面JS/CSS3动画效果：？
延时加载执行JS：安卓的onpagefinished事件会在JS脚本执行完后触发，或JQuery操作完DOM执行完$(document).ready(function(){})事件后才会渲染显示页面
滚动原生效果：body{overflow:scroll|auto;-webkit-overflow-scrolling:touch;}(ios 8+,android 4.0+)

样式

锁定viewport：ontouchmove="event.preventDefault()"，任何屏幕操作不移动用户界面，除键盘；
白屏：css加载问题、首屏异步等待问题、内联JS阻塞渲染问题
清除transition动画过程中闪屏：-webit-backface-visibility:hidden
input在IE10中的“x”清空符：input:-ms-clear{display:none}
input属性：autocapitalize="on"开启自动大写；autocorrect="off"取消自动修正
去掉安卓语音输入按钮：input::-webkit-input-speech-button{display:none}
不自动识别邮箱/电话：<meta name="format-detection" content="email=no,phone=no">
手动申明电话/邮箱：href="tel:<num>"、href="sms:<e-mail>"
绝对定位输入框在输入召出键盘时，产生CSS移位：-webkit-user-modify:read-write-plaintext-only；
多文字省略号显示：带...元素绝对定位模拟实现，多余文字overflow:hidden；或display:-webkit-box、-webkit-line-clamp、-webkit-box-orient:vertical、text-overflow:ellipsis结合实现
阻止旋转屏幕自动调整字体大小：html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{-webkit-text-size-adjust:none;}
取消文字选取：-webkit-user-select:none
禁止弹窗：-webkit-touch-callout:none
书签保存显示自定义图标，而不是缩影图：<link rel="apple-touch-startup-image" href="<uri>">