复杂纷扰的世界背后，总会有万变不离其宗的简单规则
啃先生 Mar.8th.2016
前面写了两篇移动适配相关的文章：
《）》重点介绍了怎样利于rem来处理尺寸（width、height、margin、padding等等）相关的适配。
《》通过介绍1个物理像素border的实现，引出viewport、物理像素、CSS像素的概念，以及它们之间的关系。
这是移动适配相关的第三篇文章，介绍vw、vh，然后对三篇文章做一个总结。
屏幕适配是一个很容易被忽略的问题，但对于精益求精的产品而言，是必不可少的。对于Web开发的求职者而言，也是一个必需要理解清楚的经典问题
其实，尺寸（width、height、margin、padding等等）相关的适配，除了使用rem以外，还可以使用CSS3的vh和vw。
Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).
vw代表viewport宽度的1%，即viewport宽度被划分为100份，1vw代表1份的宽度。
vh是高度。规律跟vw一样。
wmin是vh和vw中较小者；vmax是vh和vw中较大者
咋一看，不就是CSS中的百分比嘛？
div{ width = 1 }
div{ width:1%; }&
&也没错，但是当我们想实现类似九宫格图片的时候，就能感受到它的魔性了。
例如要实现上面的图片布局，即三张图占满一整屏，而每张图都是正方形，用vw怎么实现？代码如下：
如果使用%，纯粹用CSS是无法实现的，除非JS计算动态设置。
那么vw、vh的兼容性如何呢？看看下图的查询结果，移动端安卓4.3自带浏览器不支持。
soga，看起来很简单。那么问题来了，为什么之前的文章要费那么大力气写rem？
看到这里，可以休息一小段了，现在对三篇文章做一个总结
回顾上一期写1个物理像素border的实现的时候，提到有两种实现方法：
整个页面缩放，viewport 设置 scale
单个元素缩放，transform scale
其中，对单个元素的边框进行缩放的方案无法实现圆角。而整个页面缩放的方案跟CSS标准一样实现。
vw(vh)和rem要解决的是尺寸相关的适配，对比vw(vh)跟rem的区别：1. 兼容性，vw不兼容安卓4.3及以下自带浏览器
2. px转rem的插件较为丰富
那么，安卓4.3及以下操作系统在国内的市场份额是多少呢？友盟的统计结果是约31%，量较大。
因此较为稳妥的方案还是rem。
所以当拿到一个移动端Web项目，我的决策思路如下：
关于移动适配的专题还有很多，例如设计师输出多少分辨率的素材，才能即节省流量，又兼顾清晰度？
不管什么专题，前提是理解viewport，CSS像素和物理像素的概念以及它们之间的关系。所以到目前为止我所整理出来的三篇文章，是移动适配知识中非常重要的基础知识。
因此欢迎查看前两篇文章，写得不对的地方欢迎拍砖。
博客上主要发技术文章，而公众号里除了技术文章，还会发一些深圳身边的创业故事，前端入门，以及经验方面的东西，欢迎关注。
阅读(...) 评论()制作的移动端页面出现横向的滚动条？_问答_ThinkSAAS
制作的移动端页面出现横向的滚动条？
制作的移动端页面出现横向的滚动条？
制作的移动端页面在手机上运行时出现了横向滚动条，
使用overflow-x：hidden虽然去掉了横向的滚动条，但是左右滑动时还是会左右移动几个像素？
&meta name="viewport"content="width=device-width, initial-scale=1.0"&
头部加上这句话，让你的页面大小自适应设备的宽度。
添加你想要问的问题
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
官方1群：【已满】
让ThinkSAAS更好，把建议拿来。
关注微信，更好学习移动端重构系列10——侧边栏导航
所属分类：
发布时间： 09:33
panel一般用来做侧边栏导航，铺满整屏高度，有两种展现形式：第一种直接盖在整块内容栏（包括header和footer部分）上面，如图一；第二种把整块内容栏推开panel的宽度，如图二
设计结构如下：&
&header class=&header&&&/header&
&div class=&wrap-page&&
&section class=&page&&&/section&
&footer class=&footer&&&/footer&
&section class=&panel&&&/section&
第一种实现方案：
先将panel通过translate偏移负的本身宽度，离开可视区域，然后通过切换active这个class来实现无偏移。当然除此之外，top和bottom的0实现了100%高度，z-index要保证大于header和footer的层级。
$panelWidth:
bottom: 0;
z-index: 980;
width: $panelWidth;
background-color:
@include translate3d(-$panelWidth, 0, 0);
@extend %transition-
.panel.active{
@include translate3d(0, 0, 0);
同样我们也可以通过给body添加删除class如panel-active来控制panel的位置。
第二种实现方案
，在demo1的基础上根据第二种方案顺便处理下了当panel出现时，内容禁止滚动
因为需要实现整块内容栏（包括header和footer部分）偏移panel的宽度，所以第一反应是应该有个div把整块内容栏包裹下，如下：&
&div class=&wrap-container&&
&header class=&header&&&/header&
&div class=&wrap-page&&
&section class=&page&&&/section&
&footer class=&footer&&&/footer&
&section class=&panel&&&/section&
多了一层结构，看起来有点不爽，不过使用起来还是很爽的。首先panel偏移负的本身宽度，接下来通过控制wrap-container的class来实现内容栏偏移panel的宽度
bottom: 0;
z-index: $zIndexOverlay;
width: $panelWidth;
background-color:
@include translate3d(-$panelWidth, 0, 0);
.wrap-container{
@extend %transition-
.wrap-container.panel-active{
@include translate3d($panelWidth, 0, 0);
既然这里需要一个父元素来实现一个偏移，为什么body不可以呢？所以果断干掉wrap-container，恢复最初的结构
bottom: 0;
z-index: $zIndexOverlay;
width: $panelWidth;
background-color:
@include translate3d(-$panelWidth, 0, 0);
body.has-panel{
@extend %transition-
body.panel-active{
@include translate3d($panelWidth, 0, 0);
一般来说使用比较多的还是第二种方案，因为第一种直接把左边的那个点击图标遮盖住了。而panel实际使用的时候还是挺不太好办的，因为左边的第一个icon一般都是放首页，返回什么的，当然适用不适用还是根据各自业务需要走
转载请自觉注明原文:
声明：本站所有素材/文章除标明原创外，均来自网络转载，仅供学习和参考之用，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢合作！
相关文章：1、&iOS里fixed中有input或者textarea，用户在里面输入文字，触发键盘，fixed容器会居中显示，而不是继续悬浮
& & & 解决办法：&
2、移动端click时间300ms延迟
& & & 解决办法：zepto.js &或者百度touch.js 或者是fastclick.js
3、zepto的touch问题：swipe事件在小米1等低端手机不支持 基本不用zepto
4、百度的touch.js通过touch.on进行绑定事件，但是点击会遇到点透问题，也就是父级触发，子级触发
& & &解决办法：下载最新版touch &地址：&通过最新API & & & & & & &&ev.originEvent.preventDefault();
之前有点透问题解决办法，用到touchend或者是touchstar，可以是可以，但是有没有考虑用户在有滑屏的时候刚好手指刚碰到这个按钮或者刚好在这个按钮手指离开，也就会触发这个按钮事件，所以这种方法不太合理，往往都是点击才触发的不是碰一下就让他触发。
5、select下拉框的高问题，手机显示样式不一样，在QQ浏览器 弹出的option列表的height跟select一样高，在HTC手机自带的浏览器，height设置较高的时候，不能用option去选中需要的参数值，还有option默认显示的第一个有底色
6、在ipod、iphone4不支持通过tap触发事件audio的JS，比如不能通过src的改变触发声音播放，用click去解决。
7、移动端audio在苹果手机不支持音乐自动播放，苹果有安全机制，需要用户去手动触发才能播放音乐，也就是现在很多一屏一屏滑动项目要加个音乐图标 不只是简单的让用户去关掉音乐，投机做法是用户手触发到屏幕的时候就执行ID.play();的JS
8、表单就不说了，比如上传按钮设背景图无效，都是通过opacity为0来模拟的
9、很多人用到fullPage.js来实现大图滚动或者是一屏一屏的，但是在微信开发中用到这插件如果不设置anchors来定义锚点，微信的公众号发布文章都带有链接参数 有#号，不加anchors ，就会出现滚到第二屏用户退出继续进去 马上跳到第二页问题。
&解决办法：anchors: ['page1', 'page2', 'page3', 'page4'],
10、推荐使用swiper.js进行开发，比较好的中文API网站是：.cn/ 能解决很多移动端问题，
11、苹果系统在滚动长页面的时候总是滚的很不爽，不利索，回弹效果，加一句代码：-webkit-overflow-scrolling :
12、video默认控制器隐藏：video::-webkit-media-controls-enclosure { display:none!} ，还有就是video在移动端可以设置第一帧画面，但是有些手机比如HTC默认是灰色背景的，解决办法无非就是弄个图盖在上面，点击的时候图消失 触发play，处女座才这么干。
13、PNG图压缩很头疼，效果不好，你可以试试这个网站:&&很多人都知道jpg可以调质量，但是不知道png也能这么压缩，效果最好的一个网站。现在出现一种质量更低的webP格式图，谷歌开发的，安卓手机测试都可以，苹果手机不行。不采用，可以了解一下。 可查看智图：&
14、能用字体图标就用字体图标，IE6都能兼容，移动端怕啥？&& &
15、CSS3动画效果可以参考下Animate.css &写的很不错：&
& & & &有些低端手机比较炫的效果直接有前有后，没有中间效果，手机卡出翔，不支持。
16、了解viewport.js的人，如果遇到一些手机缩放小变大，jquery就要放到viewport引用前面，还有就是meta标签，需要注意width=device-width ，github地址：& 用px来切图移动端，PC端怎么切你移动端也跟着切，但是一般少用，viewport会出现些问题，项目比较急才用
17、移动端用rem吧，别再用老掉牙的em了；
18、苹果手机都知道手机号码会消失不见，加句代码吧：&metacontent="telephone=no"name="format-detection"/&
& & &忽略邮箱识别，加句代码吧：&meta&content="email=no"&name="format-detection"&/&
19、 好累，先睡觉 改天再补充.....
以下移动端内容来自CSDN博友整理：
首先，先说的是我每个项目都会用到的一个模板页，这个我遇到大大小小的坑之后定义好的一个html文件
&!DOCTYPE&html
上面的meta可以帮我避免了好都问题
遇到的问题：
1.苹果手机上面，input控件会有默认的样式
/*去掉苹果手机端web按钮默认样式，解决按钮默认圆角问题*/&&
input[type="button"]{-webkit-appearance:&/*去除input默认样式*//*border-radius:&0*/}&&
2.在点击a标签的时候，安卓的手机会有蓝色底，苹果的机子会有灰色底
/*屏蔽点击元素出现底色*/&&
&&&&-webkit-tap-highlight-color:rgba(255,255,255,0);&&
3.禁止页面上的文字选中功能
-webkit-user-select:&&
4.左图，右文字的结构实现
这种结构 &
（1）.第一次做的时候，左右两块都是用百分百，这样在不同的屏幕因为右边字体的原因会有布局混乱的情况，然后就用媒体查询写多了两个样式文件，不过还有一个就是在平板上面，同样的百分百，左边的图片太大，导致右边的文字之间的间距要很大才可以对齐，效果很不好
（2）.第二次做的时候，就想到了一个方法，利用float脱离文档流的特性，给图片设置一个maxwidth，然在device-width*图片百分百=maxwidth时，将文字所在的div的float设置为none；且设置margin-left为图片的宽度+之间的间距。
（3）.第三次做的时候，因为看了其他的一些轻APP在横屏的时候，图片大小依然一致，所以把图片宽度定死，给个max-width和min-width，用弹性布局 flex-box，这回就很简单的高度这个布局问题
5.在微信，UC打开页面会有缓存问题，导致有时候改动的小效果看不到
解决：这里试过用cache来不让其缓存，不过用完之后反而令他们不加载文件（至今还没成功使用过cache），最后在加载发送请求的时候文件后面添加多个随机数，这样才解决测试是缓存问题
6.在做手机页面的时候，很多时候会用到z-index这个属性，如果用到这个属性的时候再对对应元素设置的话，会比较容易乱。
解决：我设置了
&top0{z-index:9999};
top1{z-index:8888};
top2{z-index:7777};
top3{z-index:6666};
top4{z-index:5555};
这样，在每个页面中，对应得贴上上面样式就行了。
7.还有就是多列布局column，弹性布局flex-box
在不知道这两种布局的时候，以下布局对来来说是比较麻烦的,特别是三列的，并且中间那个还有左右边框，定义百分百的时候比较麻烦。
在知道多列布局column，弹性布局flex-box后 上面的问题很好解决，但是要记得column的子元素要给高度，不然有可能会布局混乱
还有个问题就是设置column-count为3的时候，在7个子元素的时候会是这样的
竖着排列，不符合正常的一个阅读习惯，最后还是改成了float来布局
8.em跟rem的区别
em是相对于父层
rem是相对于根元素
所以说，如果html{font-size:62.5%};的时候，
如果是在parent元素设置1.5em,child设置1.0em就等同于html的1.5em了
在parent元素设置1.5em的情况下，child用rem作为font-size的单位的话，那么就要设置1.5rem才等同上面的效果
9.backgrond-size,这个属性很好用
用法有 a.百分百 b.直接给宽高 c.cover d.contain四种用法，按需要选择使用
10.在iphone中，在手机改为横屏模式的时候，字体会默认变大
/*禁止IOS横屏的时候字体变大*/-webkit-text-size-adjust:
11.在用到&div&&img src="" /&&/div&这个结构的时候，就是用块级元素包住img的时候，会出现div高度大于img的情况，就是有点高度不知道怎么来的 &解决:img{display:};
12.在用到media的时候，如果在&meta&有设置width=device-widht的话，media中在设置max-width min-width，这里不能用max-device-width 跟 min-device-height，不然会没效果
13.目前手机web还无法禁用手机横屏的情况下，如果你页面布局有问题的话，在横屏的时候会出现布局乱的情况
在横屏的时候弹出个层把他改正
/*@media&screen&and&(orientation:landscape)&&
&&&&.orientation-phone&&
&&&&&&&&display:&&&
/*页面遮盖层*/&&
14.在弹出整屏div的时候，如果页面整体大于一屏幕，这时候还会出现页面可以滚动的情况页面旁边是出现滚动条的，而且是可以拖动的
解决:在body设置高度100%，且overflow-在弹出消失的时候才去掉overflow-
15.在做一个手机web项目的时候，要先总结下页面所以的字体大小，然后定义好几种常用font-size，防止后期混乱
16.在看设计稿的时候，要注意比例的缩放，因为UI做的时候用的尺寸是用640*1136（至少我这边是这样），然后再做手机web的时候，我们再mate那里content设置width=device-width，所以要根据实际的页面效果来定义页面常用的font-size大小以及其他。不能按UI给出的字体大小来设置font-size。
17.在class反面，少用继承，多用组合，这样可以加快开发效率，可以自己定义一个底层样式base.css（常用样式且所以项目都可以共用）
18.可能做手机web的都去学校手机web开发框架，例如我就是学了jquery mobile，这个框架很强大，但是不的不说，就是在UI样式方面比较麻烦，要不断的去覆盖样式，如果你的web是UI是有自己特色的话，这个时候用jquery mobile就比较费时间（至少我是这样）。所以说在开发的时候，觉得哪个方法快就用哪个，不要为了用框架而且用框架。
************************************************************分割线 ************************************************************************************
以下规范建议，均是Alloyteam在日常开发过程中总结提炼出的经验，规范具备较好的项目实践，强烈推荐使用
使用无衬线字体
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。 需补充说明，华文黑体并不存在iOS的字体库中()， 但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁
Heiti SC Light 黑体-简 细体 （iOS 7后废弃）
Heiti SC Medium 黑体-简 中黑
Heiti TC Light 黑体-繁 细体
Heiti TC Medium 黑体-繁 中黑
原生Android下中文字体与英文字体都选择默认的无衬线字体
4.0 之前版本英文字体原生 Android 使用的是 Droid Sans，中文字体原生 Android 会命中 Droid Sans Fallback
4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体
其他第三方 Android 系统也一致选择默认的无衬线字体
设置全局的CSS样式，避免图中的长按弹出菜单与选中文本的行为
-webkit-touch-callout: none;
要考虑Android低端机与2G网络场景下性能&注意！
发布前必要检查项
所有图片必须有进行过压缩
考虑适度的有损压缩，如转化为80%质量的jpg图片
考虑把大图切成多张小图，常见在banner图过大的场景
加载性能优化, 达到打开足够快
数据离线化，考虑将数据缓存在 localStorage
初始请求资源数&& 4&注意！
图片使用CSS Sprites 或 DataURI
外链 CSS 中避免 @import 引入
考虑内嵌小型的静态资源内容
初始请求资源gzip后总体积&& 50kb
静态资源(HTML/CSS/JS/Image)是否优化压缩？
避免打包大型类库
确保接入层已开启Gzip压缩（考虑提升Gzip级别，使用CPU开销换取加载时间）&注意！
尽量使用CSS3代替图片
初始首屏之外的静态资源（JS/CSS）延迟加载&注意！
初始首屏之外的图片资源按需加载（判断可视区域）&注意！
单页面应用(SPA)考虑延迟加载非首屏业务模块
开启Keep-Alive链路复用
运行性能优化, 达到操作足够流畅
避免 iOS 300+ms 点击延时问题&注意！
缓存 DOM 选择与计算
避免触发页面重绘的操作
Debounce连续触发的事件(scroll / resize / touchmove等)，避免高频繁触发执行&注意！
尽可能使用事件代理，避免批量绑定事件
使用CSS3动画代替JS动画
避免在低端机上使用大量CSS3渐变阴影效果，可考虑降级效果来提升流畅度
HTML结构层级保持足够简单
尽能少的使用CSS高级选择器与通配选择器
Keep it simple
阅读(...) 评论()移动端web开发技巧 - 简书
下载简书移动应用
写了161843字，被333人关注，获得了1048个喜欢
移动端web开发技巧
META相关1. 添加到主屏后的标题（IOS）2. 启用 WebApp 全屏模式（IOS）当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果） 3. 百度禁止转码通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们可以通过这个meta标签来禁止它：4. 设置状态栏的背景颜色（IOS）设置状态栏的背景颜色，只有在"apple-mobile-web-app-capable" content="yes"时生效content 参数：default ：状态栏背景是白色。black ：状态栏背景是黑色。black-translucent ：状态栏背景是半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。5. 移动端手机号码识别（IOS）在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：7位数字，形如：1234567带括号及加号的数字，形如：(+86)双连接线的数字，形如：00-00-0011111位数字，形如：可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别：开启电话功能123456开启短信功能：1234566. 移动端邮箱识别（Android）与电话号码的识别一样，在安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的meta来管别邮箱的自动识别：同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：7. 添加智能 App 广告条 Smart App Banner（IOS 6+ Safari）8. IOS Web app启动动画由于iPad 的启动画面是不包括状态栏区域的。所以启动图片需要减去状态栏区域所对应的方向上的20px大小，相应地在retina设备上要减去40px的大小（landscape：横屏 | portrait：竖屏）9. 添加到主屏后的APP图标指定web app添加到主屏后的图标路径，有两种略微不同的方式：apple-touch-icon：在IOS6及以下的版本会自动为图标添加一层高光效果（IOS7开始已使用扁平化的设计风格）apple-touch-icon-precomposed：使用“设计原图图标”效果：图标尺寸：可通过指定size属性来为不同的设备提供不同的图标（但通常来说，我们只需提供一个114 x 114 pixels大小的图标即可 ）官方说明如下Createdifferent sizesofyour app iconfordifferent devices.Ifyou’re creating a universal app, you needtosupply app iconsinallfour sizes.ForiPhoneandiPod touchbothofthese sizesarerequired:57x57pixels114x114pixels (high resolution)ForiPad,bothofthese sizesarerequired:72x72pixels144x144(high resolution)10. 优先使用最新版本 IE 和 Chrome11.viewport模板标题这里开始内容常见问题1、移动端如何定义字体font-family三大手机系统的字体：ios 系统默认中文字体是Heiti SC默认英文字体是Helvetica默认数字字体是HelveticaNeue无微软雅黑字体android 系统默认中文字体是Droidsansfallback默认英文和数字字体是Droid Sans无微软雅黑字体winphone 系统默认中文字体是Dengxian(方正等线体)默认英文和数字字体是Segoe无微软雅黑字体各个手机系统有自己的默认字体，且都不支持微软雅黑如无特殊需求，手机端无需定义中文字体，使用系统默认英文字体和数字字体可使用 Helvetica ，三种系统都支持*移动端定义字体的代码*/body{font-family:H}2、移动端字体单位font-size选择px还是rem对于只需要适配手机设备，使用px即可对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备rem配置参考：html{font-size:10px}@mediascreen and (min-width:480px) and (max-width:639px){html{font-size:15px}}@mediascreen and (min-width:640px) and (max-width:719px){html{font-size:20px}}@mediascreen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}@mediascreen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}@mediascreen and (min-width:800px) and (max-width:959px){html{font-size:25px}}@mediascreen and (min-width:960px) and (max-width:1079px){html{font-size:30px}}@mediascreen and (min-width:1080px){html{font-size:32px}}3、移动端touch事件(区分webkit 和 winphone)当用户手指放在移动设备在屏幕上滑动会触发的touch事件以下支持webkittouchstart——当手指触碰屏幕时候发生。不管当前有多少只手指touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动touchend——当手指离开屏幕时触发touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用以下支持winphone 8MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用css的html{-ms-touch-action:}可以阻止默认情况的发生：阻止页面滚动MSPointerUp——当手指离开屏幕时触发4、移动端click屏幕产生200-300 ms的延迟响应移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。以下是历史原因：2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。解决方案：可以解决在手机上点击事件的300ms延迟zepto的touch模块，tap事件也是为了解决在click的延迟问题触摸事件的响应顺序1、ontouchstart2、ontouchmove3、ontouchend4、onclick解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应5、什么是Retina 显示屏，带来了什么问题retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍那么，前端的应对方案是：设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2//例如图片宽高为：200px*200px，那么写法如下.css{width:100height:100background-size:100px100}其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px.css{font-size:20px}6、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0)}7、部分android系统中元素被点击时产生的边框怎么去掉android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0)
-webkit-user-modify:read-write-plaintext-}-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符另外，有些机型去除不了，如小米2对于按钮类还有个办法，不使用a或者input标签，直接用div标签8、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉9、webkit表单元素的默认外观怎么重置.css{-webkit-appearance:}10、webkit表单输入框placeholder的颜色值能改变么input::-webkit-input-placeholder{color:#AAAAAA;}input:focus::-webkit-input-placeholder{color:#EEEEEE;}11、webkit表单输入框placeholder的文字能换行么ios可以，android不行~12. 关闭iOS键盘首字母自动大写在iOS中，默认情况下键盘是开启首字母大写的功能的，如果启用这个功能，可以这样：13. 关闭iOS输入自动修正和英文输入默认自动首字母大写那样，IOS还做了一个功能，默认输入法会开启自动修正输入内容，这样的话，用户经常要操作两次。如果不希望开启此功能，我们可以通过input标签属性来关闭掉：14. 禁止文本缩放当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：html{-webkit-text-size-adjust:100%;}需要注意的是，PC端的该属性已经被移除，该属性在移动端要生效，必须设置 `meta viewport’。15. 移动端如何清除输入框内阴影在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：input,textarea{border:0;/* 方法1 */-webkit-appearance:/* 方法2 */}16. 快速回弹滚动我们先来看看回弹滚动在手机浏览器发展的历史：早期的时候，移动端的浏览器都不支持非body元素的滚动条，所以一般都借助 iSAndroid 3.0/iOS解决了非body元素的滚动问题，但滚动条不可见，同时iOS上只能通过2个手指进行滚动；Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果，不过随后这个特性又被移除；iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果在iOS上如果你想让一个元素拥有像 Native 的滚动效果，你可以这样做：.xxx{overflow:/* auto | scroll */-webkit-overflow-scrolling:}PS：iScroll用过之后感觉不是很好，有一些诡异的bug，这里推荐另外一个 iDangero Swiper，这个插件集成了滑屏滚动的强大功能（支持3D），而且还有回弹滚动的内置滚动条，官方地址：17. 移动端禁止选中内容如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：.user-select-none{-webkit-user-select:/* Chrome all / Safari all */-moz-user-select:/* Firefox all （移动端不需要） */-ms-user-select:/* IE 10+ */}18. 移动端取消touch高亮效果在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来进行全局的禁止：html{-webkit-tap-highlight-color:rgba(0,0,0,0);}但这个方法在三星的机子上无效，有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签，可以解决这个问题。19. 如何禁止保存或拷贝图像（IOS）通常当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：img{-webkit-touch-callout:}20.模拟按钮hover效果移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下，a{-webkit-tap-highlight-color:rgba(0,0,0,0);}.btn-blue{display:height:42line-height:42text-align:border-radius:4font-size:18color:#FFFFFF;background-color:#4185F3;}.btn-blue:active{background-color:#357AE8;}按钮document.addEventListener("touchstart",function(){},true)兼容性ios5+、部分android 4+、winphone 8要做到全兼容的办法，可通过绑定ontouchstart和ontouchend来控制按钮的类名a{-webkit-tap-highlight-color:rgba(0,0,0,0);}.btn-blue{display:height:42line-height:42text-align:border-radius:4font-size:18color:#FFFFFF;background-color:#4185F3;}.btn-blue-on{background-color:#357AE8;}按钮varbtnBlue =document.querySelector(".btn-blue");btnBlue.ontouchstart =function(){this.className ="btn-blue btn-blue-on"}btnBlue.ontouchend =function(){this.className ="btn-blue"}21.屏幕旋转的事件和样式事件window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；window.onorientationchange =function(){switch(window.orientation){case-90:case90:
alert("横屏:"+window.orientation);case0:case180:
alert("竖屏:"+window.orientation);
}}样式//竖屏时使用的样式@mediaalland(orientation:portrait) {.css{}}//横屏时使用的样式@mediaalland(orientation:landscape) {.css{}}22.audio元素和video元素在ios和andriod中无法自动播放应对方案：触屏即播$('html').one('touchstart',function(){
audio.play()})23.摇一摇功能HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。24.手机拍照和上传图片的accept 属性使用总结：ios 有拍照、录像、选取本地图片功能部分android只有选取本地图片功能winphone不支持input控件默认外观丑陋25. 消除transition闪屏.css{/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/-webkit-transform-style:preserve-3d;/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/-webkit-backface-visibility:}开启硬件加速解决页面闪白保证动画流畅.css{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}设计高性能CSS3动画的几个要素尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位利用translate3D开启GPU加速26. android 上去掉语音输入按钮input::-webkit-input-speech-button{display:none}框架1. 移动端基础框架语法与jquery几乎一样，会jquery基本会zepto~解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能~该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。加快移动端点击响应时间CSS3动画效果库Normalize.css是一种现代的、CSS reset为HTML5准备的优质替代方案2. 滑屏框架适合上下滑屏、左右滑屏等滑屏切换页面的效果3.瀑布流框架工具推荐各浏览器支持html5属性查询调色搭配
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
看看别人在思考什么，每天更新。
· 3918人关注
分享移动开发技术、专题、干货。
· 530人关注
这个专题是用于前端学习交流和资源分享。
· 31人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：}