移动端常见问题及解决方案

一、meta基础知识

  1. H5页面窗口自动调整到设备宽度,并禁止用户缩放页面
    1. <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  2. 忽略将页面中的数字识别为电话号码
    1. <meta name="format-detection" content="telephone=no" />
  3. 忽略Android平台中对邮箱地址的识别
    1. <meta name="format-detection" content="email=no" />
  4. 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari
    1. <!-- ios7.0版本以后,safari上已看不到效果 -->
    2. <meta name="apple-mobile-web-app-capable" content="yes" />
  5. 将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式
    1. <!-- 可选default、black、black-translucent -->
    2. <meta name="apple-mobile-web-app-status-bar-style" content="black" />

二、常见问题

移动端如何定义字体font-family,中文字体使用系统默认即可,英文用Helvetica

移动端字体单位font-size选择px还是rem。对于只需要适配手机设备,使用px即可,对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

移动端touch事件(区分webkit 和 winphone)

当用户手指放在移动设备的屏幕上滑动会触发的touch事件

以下支持webkit:

1、touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指

2、 touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动

3、touchend——当手指离开屏幕时触发

4、touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用

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

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

解决方案

fastclick可以解决在手机上点击事件的300ms延迟

zepto的touch模块,tap事件也是为了解决在click的延迟问题

触摸事件的响应顺序

1、ontouchstart

2、ontouchmove

3、ontouchend

4、onclick

解决300ms延迟的问题,也可以通过绑定ontouchstart事件,加快对事件的响应。

在高清显示屏中的位图被放大,图片会变得模糊?

移动端的视觉稿通常会设计为传统PC的2倍。

前端的应对方案是:设计稿切出来的图片长宽保证为偶数,并使用backgroud-size把图片缩小为原来的1/2;

例如图片宽高为:200px*200px,那么写法如下:.css{width:100px;height:100px;background-size:100px 100px;}其它元素的取值为原来的1/2,例如视觉稿40px的字体,使用样式的写法为20px:.css{font-size:20px}

ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉?

ios用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0,也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩

  1. a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

部分android系统中元素被点击时产生的边框怎么去掉?

android用户点击一个链接,会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样,可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果

  1. a,button,input,textarea{
  2. -webkit-tap-highlight-color: rgba(0,0,0,0);
  3. -webkit-user-modify:read-write-plaintext-only;
  4. }

-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符

另外,有些机型去除不了,如小米2

对于按钮类还有个办法,不使用a或者input标签,直接用div标签

参考《如何去除android上a标签产生的边框》

1、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉?

  1. <meta name="msapplication-tap-highlight" content="no">

2、webkit表单元素的默认外观怎么重置?

  1. .css{-webkit-appearance:none;}

3、webkit表单输入框placeholder的颜色值能改变么?

  1. input::-webkit-input-placeholder{color:#AAAAAA;}
  2. input:focus::-webkit-input-placeholder{color:#EEEEEE;}

4、webkit表单输入框placeholder的文字能换行么?

ios可以,android不行~

IE10winphone8)表单元素默认外观如何重置?

1、禁用 select 默认下拉箭头

::-ms-expand 适用于表单选择控件下拉箭头的修改,有多个属性值,设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

  1. select::-ms-expand {display: none;}

2、禁用 radio 和 checkbox 默认样式

::-ms-check 适用于表单复选框或单选按钮默认图标的修改,同样有多个属性值,设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

  1. input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{
  2. display: none;
  3. }

3、禁用PC端表单输入框默认清除按钮

当表单文本输入框输入内容后会显示文本清除按钮,::-ms-clear 适用于该清除按钮的修改,同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

  1. input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{
  2. display: none;
  3. }

4、禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片

  1. .css{-webkit-touch-callout: none}

5、禁止ios和android用户选中文字

  1. .css{-webkit-user-select:none}

参考《如何改变表单元素的外观(for Webkit and IE10)》

打电话发短信的怎么实现?

1、打电话

  1. <a href="tel:0755-10086">打电话给:0755-10086</a>

2、发短信

winphone系统无效

  1. <a href="sms:10086">发短信给: 10086</a>

模拟按钮hover效果

移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,使用css的hover并不能满足我们的需求,还好国外有个激活css的active效果,代码如下:

  1. <div class="btn-blue">按钮</div>
  1. <script type="text/javascript">
  2. document.addEventListener("touchstart", function(){}, true)
  3. </script>

兼容性ios5+、部分android 4+、winphone 8

要做到全兼容的办法,可通过绑定ontouchstart和ontouchend来控制按钮的类名

  1. <div class="btn-blue">按钮</div>
  1. <script type="text/javascript">
  2. varbtnBlue = document.querySelector(".btn-blue");
  3. btnBlue.ontouchstart = function(){
  4. this.className = "btn-blue btn-blue-on"
  5. }
  6. btnBlue.ontouchend = function(){
  7. this.className = "btn-blue"
  8. }
  9. </script>

屏幕旋转的事件和样式

1、事件

window.orientation,取值:正负90表示横屏模式、0和180表现为竖屏模式;

  1. window.onorientationchange = function(){
  2. switch(window.orientation){
  3. case -90:
  4. case 90:
  5. alert("横屏:" + window.orientation);
  6. case 0:
  7. case 180:
  8. alert("竖屏:" + window.orientation);
  9. break;
  10. }
  11. }

2、样式

  1. /*竖屏时使用的样式*/
  2. @media all and (orientation:portrait) { .css{} }
  1. /*横屏时使用的样式*/
  2. @media all and (orientation:landscape) {
  3. .css{}
  4. }

audio元素和video元素在ios和andriod中无法自动播放

应对方案:触屏即播

  1. $('html').one('touchstart',function(){
  2. audio.play()
  3. })

可参考《无法自动播放的audio元素》

摇一摇功能

HTML5 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。

手机拍照和上传图片

<input type="file">的accept 属性

<!-- 选择照片 -->

<input type=file accept="image/*">

<!-- 选择视频 -->

<input type=file accept="video/*">

使用总结:ios 有拍照、录像、选取本地图片功能,部分android只有选取本地图片功能,winphone不支持

微信浏览器用户调整字体大小后页面矬了,怎么阻止用户调整?

原因

Anroid则是复写了layoutinflater 对textview做了统一处理

Ios则是修改了body.style.webkitTextSizeAdjust值

普通解决方案:android暂无方案

ios使用-webkit-text-size-adjust禁止调整字体大小

  1. body{-webkit-text-size-adjust: 100%!important;}

最好的解决方案:整个页面用rem或者百分比布局

消除transition闪屏

  1. .css{
  2. /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
  3. -webkit-transform-style: preserve-3d;
  4. /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/
  5. -webkit-backface-visibility: hidden;
  6. }

开启硬件加速,解决页面闪白,保证动画流畅

  1. .css {
  2. -webkit-transform: translate3d(0, 0, 0);
  3. -moz-transform: translate3d(0, 0, 0);
  4. -ms-transform: translate3d(0, 0, 0);
  5. transform: translate3d(0, 0, 0);
  6. }

参考《用CSS开启硬件加速来提高网站性能》

取消input在ios下,输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

android 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

android 2.3 bug

@-webkit-keyframes 需要以0%开始100%结束,0%的百分号不能去掉

after和before伪类无法使用动画

border-radius不支持%单位

translate百分比的写法和scale在一起会导致失效,例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

android 4.x bug

三星 Galaxy S4中自带浏览器不支持border-radius缩写

同时设置border-radius和背景色的时候,背景色会溢出到圆角以外部分

部分手机(如三星),a链接支持鼠标:visited事件,也就是说链接访问后文字变为紫色

参考《border-radius 移动之伤》

设计高性能CSS3动画的几个要素

尽可能地使用合成属性transform和opacity来设计CSS3动画,不使用position的left和top来定位

利用translate3D开启GPU加速

参考《High Performance Animations》

fixed bug

ios下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位

android下fixed表现要比iOS更好,软键盘弹出时,不会影响fixed元素定位

ios4下不支持position:fixed

解决方案:可用isroll.js,暂无完美方案

参考

《移动端web页面使用position:fixed问题总结》

《使用iScroll.js解决ios4下不支持position:fixed的问题》

如何阻止windows Phone的默认触摸事件

winphone下默认触摸事件事件使用e.preventDefault是无效的

目前解决方法是使用样式来禁用

  1. html{-ms-touch-action: none;}/* 禁止winphone默认触摸事件 */

参考:《Windows phone 8 touch support》

常用的移动端框架

zepto.js

语法与jquery几乎一样,会jquery基本会zepto~,最新版本已经更新到1.16,官网:http://zeptojs.com/

中文(非官网):http://www.css88.com/doc/zeptojs_api/

常使用的扩展模块:

浏览器检测:https://github.com/madrobby/zepto/blob/master/src/detect.js

tap事件:https://github.com/madrobby/zepto/blob/master/src/touch.js

iscroll.js

解决页面不支持弹性滚动,不支持fixed引起的问题~,实现下拉刷新,滑屏,缩放等功能~,最新版本已经更新到5.0

官网:http://cubiq.org/iscroll-5

滑屏框架

适合上下滑屏、左右滑屏等滑屏切换页面的效果

slip.js, iSlider.jsfullpage.js

手机移动端web前端常见问题整理的更多相关文章

  1. web前端-《手机移动端WEB资源整合》——meta标签篇

    前端网页meta元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词.meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向 ...

  2. 【超级干货】手机移动端WEB资源整合

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  3. 手机移动端WEB资源整合

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  4. 【超级干货】手机移动端WEB资源整合:转载

    转载于:http://www.w3cfuns.com/notes/24611/fbba9cbd616e795360ea45515494aa53.html meta基础知识 H5页面窗口自动调整到设备宽 ...

  5. 安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

    一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调 ...

  6. web标准常见问题整理

    1.超链接访问过后hover样式就不出现的问题 2.FF下如何使连续长字段自动换行 3.ff下为什么父容器的高度不能自适应 4. IE6的双倍边距BUG 5. IE6下绝对定位的容器内文本无法正常选择 ...

  7. WEB前端工程师整理的原生JavaScript经典百例

    一.原生JavaScript实现字符串长度截取 二.原生JavaScript获取域名主机 三.原生JavaScript转义html标签 四.原生JavaScript时间日期格式替换 Date.prot ...

  8. 移动端web前端开发

    移动端浏览器现状 视口 meta视口标签 二倍图 移动端主流方案 移动端技术解决方案 移动端常见布局 1.流式布局(百分比布局) 2.flex布局 3.rem适配布局 1)rem单位 2)媒体查询 3 ...

  9. web前端优化整理(转)

    如今浏览器能够实现的特性越来越多,并且网络逐渐向移动设备转移,使我们的前端代码更加紧凑,如何优化,就变得越来越重要了. 开发人员普遍会将他们的代码习惯优先于用户体验.但是很多很小的改变可以让用户体验有 ...

随机推荐

  1. DateTimepicker中的星期问题

    开发机:win10 64+VS2013 客户机:win7 32bit 在项目中使用DateTimepicker,需要将时间获取到,然后转换为string,然后再转换为DateTime类型.开发机器上测 ...

  2. go 数据类型type尝试

    package main import "fmt" import "encoding/json" type Human struct{ Name string ...

  3. react mobx webpack 使用案例

    1.package.json: { "name": "wtest", "version": "1.0.0", " ...

  4. 理解Solr缓存及如何设置缓存大小

    文献地址:http://wangdg.com/understanding-and-tuning-solr-cache/ 理解Solr缓存及如何设置缓存大小 为了得到最好的检索性能,Solr会在内存中缓 ...

  5. python 27 获取时区转换后的时间

    python3的datetime有timezone属性,这里介绍python2.7环境下,获取时区转换后的时间. 利用第三方插件,pytz,没有安装的话安装一下. #!/usr/bin/env pyt ...

  6. python-requests数据驱动延伸

    在 python-requests模块的讲解和应用 基础上进行数据驱动的延伸 task_01_requests.py #-*- coding:utf-8 -*- #task_01_requests.p ...

  7. 操作笔记:tomcat在正式环境的常见问题和idea的远程调试

    1,一台服务器有两个容器,比如:jetty,tomcat. 出现问题: jetty启动的时候,tomcat就不能启动了. 此时,需要修改tomcat的配置文件:servler.xml <?xml ...

  8. android 实现一个简单纯文本的ListView

    思维线路: 1.创建一个ListViewActivity,LinearLayout布局里写了一个ListView布局 2.创建一个TextView布局给ArrayAdapter适配器使用 3.将Tex ...

  9. this 基础使用方法

    在Java中,this是调用类中变量和内部类的构造方法的关键词,在对象有同名变量时,可以指定类的变量. 例子1: package example_1; import java.lang.*; publ ...

  10. Java网络通信 TCP网络,ServerSocket类

    package rom; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamRe ...