移动Web开发常见问题
一、流式布局
1.1 什么是流式布局
流式布局就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充,同时会设定最小宽度和最大宽度,适用于图片比较多的首页、门户、电商等。
在这里我们以京东的M站为例进行说明:
![](https://i-blog.csdnimg.cn/blog_migrate/67be64167010488e63fe4d60ba14523b.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/5a8d953b0d41122ca3834151fd362ab3.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/7560431c2a2bd14d3d84cabf363e438a.webp?x-image-process=image/format,png)
可以看到,在京东各个模块的主容器中,都设置了最大最小宽度和宽度100%,而在导航区块中,由于一行有5个小区块,所以设置了宽度为20%,使得小区块也能达到自适应的效果。
1.2 viewport
在移动端用来承载网页的这个区域就是我们的视觉窗口
viewport
,这个区域可以设置高度宽度,可以按比例放大缩小,而且能设置是否允许用户自行缩放。
![](https://i-blog.csdnimg.cn/blog_migrate/c49ec9cc50a2d7f01b37fe4136c2e9d9.webp?x-image-process=image/format,png)
- width:设置的是
viewport
宽度,可以设置device-width
特殊值。 - initial-scale:初始缩放比,大于0的数字,一般设置为1.0。
- maximum-scale:最大缩放比,大于0的数字。
- minimum-scale:最小缩放比,大于0的数字。
- user-scalable:用户是否可以缩放,yes或no(1或0)。
<!--视口标签通可以使用 meta:vp + tab 来快速生成,通常我们可以设置为下边这样。-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
1.3 移动端常见事件
1.3.1 touch事件
- touchstart:当手指触碰屏幕时候发生。不管当前有多少只手指。
- touchmove:当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用
event
的preventDefault()
可以阻止默认情况的发生:阻止页面滚动。 - touchend:当手指离开屏幕时触发。
- touchcancel:系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面
alert()
一个提示框,此时会触发该事件,这个事件比较少用。
触摸事件的响应顺序:
ontouchstart --> ontouchmove --> ontouchend --> onclick(300ms延时)。
1.3.2 event事件
- originalEvent:(原生事件)是
jquery
封装的事件。� - targetTouches:目标元素的所有当前触摸。
- changedTouches:页面上最新更改的所有触摸。
- touches:页面上的所有触摸。注意:在
touchend
事件的时候event
只会记录changedtouches
。
二、响应式开发
2.1 响应式开发简介
2.1.1 什么是响应式开发
在移动互联日益成熟的时候,我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。
通常的做法是针对移动端单独做一套特定的版本。
但是如果终端越来越多那么你需要开发的版本就会越来越多(大屏移动设备普及)。
那么
Ethan Marcotte
在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端。
2.1.2 响应式开发的前景
现在的移动设备屏幕越来越大。
越来越多的设计师也采用了这种设计。
在新建站的一些网站现在普遍采用的响应式开发。
那么在前端开发当中也是一项必备的技能。
2.1.3 响应式开发的原理
CSS3中的
Media Query
(媒介查询),通过查询screen
的宽度来指定某个宽度区间的网页布局。
- 超小屏幕:768px以下(移动设备)。
- 小屏设备:768px-992px。
- 中等屏幕:992px-1200px。
- 宽屏设备:1200px以上。
2.2 Bootstrap框架
2.2.1 Bootstrap简介
- 官方网站
- Bootstrap中文网
- 它是由
Twitter
的设计师Mark Otto
和Jacob Thornton
合作开发,是一个CSS/HTML
框架。它提供了优雅的HTML
和CSS
规范,它即是由动态CSS
语言Less
写成。 Bootstrap
是基于HTML5
和CSS3
开发的,它在jQuery
的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery
插件。Bootstrap
中包含了丰富的Web
组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。
2.2.2 Bootstrap常用样式
-
container类:用于定义一个固定宽度且居中的版心。
<div class="topbar"> <div class="container"> <!-- 此处的代码会显示在一个固定宽度且居中的容器中 该容器的宽度会跟随屏幕的变化而变化 --> </div> </div>
-
栅格系统:
Bootstrap
中定义了一套响应式的网格系统,其使用方式就是将一个容器划分成12列,然后通过col-xx-xx
的类名控制每一列的占比。-
row类:
- 因为每一个列默认有一个15px的左右外边距。
row
类的一个作用就是通过左右-15px屏蔽掉这个边距。
<div class="container"> <div class="row"></div> </div>
-
col-xx-x类:
- 第一个连接符后边写屏幕尺寸,有
xs
超小屏幕 手机(<768px)、sm
小屏幕 平板 (≥768px)、md
中等屏幕 桌面显示器(≥992px)、lg
大屏幕 大桌面显示器 (≥1200px)四种。 - 第二个连接符后边表示对应的份数,占12份中的几份。
<div class="row"> <div class="col-md-2 text-center"></div> <div class="col-md-5 text-center"></div> <div class="col-md-2 text-center"></div> <div class="col-md-3 text-center"></div> </div>
- 第一个连接符后边写屏幕尺寸,有
-
-
hidden类:设置在不同的屏幕下隐藏。
<div class="hidden-xs,hidden-sm,hidden-md,hidden-lg"> </div>
-
text-xx类:设置文字的对齐方式。
text-center 文本居中 text-left 文本左对齐 text-right 文本右对齐
-
pull-xx类:设置浮动。
pull-left 左浮动类 pull-right 右浮动类
-
center-block类:让一个固定宽度的元素居中。
2.2.3 字体图标
-
字体图标:
@font-face { font-family: 'XXX'; src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'), url('../font/MiFie-Web-Font.svg') format('svg'), url('../font/MiFie-Web-Font.ttf') format('truetype'), url('../font/MiFie-Web-Font.woff') format('woff'); }
-
字体文件格式:
eot
:embedded-opentype
svg
:svg
ttf
:truetype
woff
:woff
2.2.4 轮播图插件 Carousel
-
基本的轮播图实现:
<!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图 bootstrap.js会自动为当前元 素添加图片轮播的特效 --> <div id="轮播图的ID" class="carousel slide" data-ride="carousel"> <!-- ol标签是图片轮播的控制点 --> <ol class="carousel-indicators"> <!-- 每一个li就是一个单独的控制点 data-target属性就是指定当前控制点控制的是哪一个轮播图,其目的是如果界面上有多个轮播图,便于区分到底控制哪一个 data-slide-to属性是指当前的li元素绑定的是第几个轮播项 注意,默认必须给其中某个li加上active,展示的时候就是焦点项目 --> <li data-target="#轮播图的ID" data-slide-to="0" class="active"></li> <li data-target="#轮播图的ID" data-slide-to="1"></li> <!-- ...更多的 --> </ol> <!-- .carousel-inner是所有轮播项的容器盒子, 注意role="listbox"代表当前div是一个列表盒子,作用就是给当前div添加一个语义 --> <div class="carousel-inner" role="listbox"> <!-- 每一个.item就是单个轮播项目,注意默认要给第一个轮播项目加上active,表示为焦点 --> <div class="item active"> <!-- 轮播项目中展示的图片 --> ![](example.jpg) <div class="carousel-caption"> <!-- 标题或说明性文字,如果不需要,直接删除当前div.carousel-caption --> </div> </div> <div class="item"> <!-- ... --> </div> <!-- ... --> </div> <!-- 图片轮播上左右两个控制按钮,分别点击可以滚动到上一张和下一张 --> <!-- 此处需要注意的是 该a链接的href属性必须指向需要控制的轮播图ID --> <!-- 另外a链接中的data-slide="prev"代表点击该链接会滚到上一张,如果设置为next的话则相反 --> <a class="left carousel-control" href="#轮播图的ID" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">上一张</span> </a> <a class="right carousel-control" href="#轮播图的ID" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">下一张</span> </a> </div>
2.2.5 函数库 underscoreJS
-
_.template
:<ol class="carousel-indicators"> <!--渲染的HTML字符串--> </ol> <div class="carousel-inner" role="listbox"> <!--渲染的HTML字符串--> </div>
/*取到模版当中的字符串*/ var pointTemplateStr = $('#point_template').html(); var imageTemplateStr = $('#image_template').html(); /*转化成模版函数*/ var pointTemplate = _.template(pointTemplateStr); var imageTemplate = _.template(imageTemplateStr); /*传入数据 解析成 html 字符*/ var pointHtml = pointTemplate({model:data}); var imageHtml = imageTemplate({model:data,isMobile:isMobile});//我们只需要再加一个属性 /*把html字符串渲染在页面当中*/ $('.carousel-indicators').html(pointHtml); $('.carousel-inner').html(imageHtml);
<!--点模版--> <script type="text/template" id="point_template"> <%_.each(model,function(obj,i){%> <li data-target="#carousel-example-generic" data-slide-to="<%=i%>" class="<%=(i==0?'active':'')%>"></li> <%})%> </script> <!--图片模版--> <script type="text/template" id="image_template"> <%_.each(model,function(obj,i){%> <div class="item <%=(i==0?'active':'')%>"> <% if(isMobile){ %> <a href="#" class="m_imgBox"> <img src="<%=obj.img%>" alt=""/> </a> <%} else {%> <a href="#" class="pc_imgBox" style="background-image:url(<%=obj.bac%>)"></a> <%}%> </div> <%})%> </script>
三、rem布局
准备编辑这段时发现简书上已经有作者写了关于rem布局的介绍,并且他的设置比我所用的更加简洁,贴上地址供大家学习参考。
手机端页面自适应解决方案—rem布局进阶版(附源码示例)
四、移动web开发中的常见问题
4.1 移动端如何定义字体font-family?
三大手机系统的字体:�
- iOS 系统:
- 默认中文字体是
Heiti SC
- 默认英文字体是
Helvetica
- 默认数字字体是
HelveticaNeue
- 无微软雅黑字体
- 默认中文字体是
- Android 系统:
- 默认中文字体是
Droidsansfallback
- 默认英文和数字字体是
Droid Sans�
- 无微软雅黑字体
- 默认中文字体是
- Winphone 系统:
- 默认中文字体是
Dengxian
(方正等线体) - 默认英文和数字字体是
Segoeod
- 无微软雅黑字体
- 默认中文字体是
各个手机系统有自己的默认字体,且都不支持微软雅黑,如无特殊需求,手机端无需定义中文字体,使用系统默认英文字体和数字字体可使用Helvetica
,三种系统都支持。
/* 移动端定义字体的代码 */
body{
font-family:Helvetica;
}
4.2 移动端字体单位font-size选择px还是rem?
-
对于只需要适配手机设备,使用
px
即可。 -
对于需要适配各种移动设备,使用
rem
,例如只需要适配iPhone
和iPad
等分辨率差别比较挺大的设备。 -
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 } }
4.3 移动端touch事件(区分webkit和winphone)有哪些?
当用户手指放在移动设备在屏幕上滑动会触发的touch事件:
- 以下支持webkit:
touchstart
——当手指触碰屏幕时候发生。不管当前有多少只手指。touchmove
——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用event``preventDefault()
可以阻止默认情况的发生:阻止页面滚动。touchend
——当手指离开屏幕时触发。touchcancel
——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()
一个提示框,此时会触发该事件,这个事件比较少用。
- 以下支持winphone 8:
MSPointerDown
——当手指触碰屏幕时候发生。不管当前有多少只手指。MSPointerMove
——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用css
的html{-ms-touch-action:none;}
可以阻止默认情况的发生:阻止页面滚动。MSPointerUp
——当手指离开屏幕时触发。
4.4 如何解决移动端click屏幕产生200-300ms的延迟响应问题?
移动设备上的web网页是有300ms延迟的,往往会造成按钮点击延迟甚至是点击失效。
解决方案:
fastclick
可以解决在手机上点击事件的300ms延迟。zepto
的touch
模块,tap
事件也是为了解决在click
的延迟问题。
触摸事件的响应顺序:
ontouchstart
ontouchmove
ontouchend
onclick
解决300ms延迟的问题,也可以通过绑定ontouchstart
事件,加快对事件的响应。
4.5 什么是Retina 显示屏,带来了什么问题?
retina:一种具备超高像素密度的液晶屏,同样大小的屏幕上显示的像素点由1个变为多个,如在同样带下的屏幕上,苹果设备的retina
显示屏中,像素点1个变为4个。
在高清显示屏中的位图被放大,图片会变得模糊,因此移动端的视觉稿通常会设计为传统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}
4.6 移动端如何取消touch高亮效果?
在做移动端页面时,会发现所有a标签在触发点击时或者所有设置了伪类:active
的元素,默认都会在激活状态时,显示高亮框,如果不想要这个高亮,那么你可以通过css以下方法来进行全局的禁止:
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
-
ios
用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color
的alpha
值为0,也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩。a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
-
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-only; }
-webkit-user-modify
有个副作用,就是输入法不再能够输入多个字符。另外,有些机型去除不了,如小米2。对于此类问题还有个办法,不使用
a
或者input
标签,直接用div
标签。 -
winphone
系统a
、input
标签被点击时产生的半透明灰色背景怎么去掉?<meta name="msapplication-tap-highlight" content="no">
4.7 关于webkit表单的几个问题
-
webkit
表单元素的默认外观怎么重置?.css{-webkit-appearance:none;}
-
webkit
表单输入框placeholder
的颜色值能改变么?input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEE}
-
webkit
表单输入框placeholder
的文字能换行么?iOS可以,Android不行。
-
如何禁止文本缩放�?
当移动设备横竖屏切换时,文本的大小会重新计算,进行相应的缩放,当我们不需要这种情况时,可以选择禁止:
html { -webkit-text-size-adjust: 100%; }
需要注意的是,PC端的该属性已经被移除,该属性在移动端要生效,必须设置
meta viewport
。
4.8 如何在移动端禁止用户选中内容?
如果你不想用户可以选中页面中的内容,那么你可以在css中禁掉:
.user-select-none {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all (移动端不需要) */ -ms-user-select: none; /* IE 10+ */ }
4.9 如何模拟按钮的hover效果?
移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,使用css
的hover
并不能满足我们的需求,还好国外有个激活css
的active
效果,代码如下:
<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"> <style type="text/css"> a{-webkit-tap-highlight-color: rgba(0,0,0,0);} .btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;} .btn-blue:active{background-color: #357AE8;} </style> </head> <body> <div class="btn-blue">按钮</div> <script type="text/javascript"> document.addEventListener("touchstart", function(){}, true) </script> </body> </html> 兼容性ios5+、部分android 4+、winphone 8
要做到全兼容的办法,可通过绑定ontouchstart
和ontouchend
来控制按钮的类名。
<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"> <style type="text/css"> a{-webkit-tap-highlight-color: rgba(0,0,0,0);} .btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;} .btn-blue-on{background-color: #357AE8;} </style> </head> <body> <div class="btn-blue">按钮</div> <script type="text/javascript"> var btnBlue = document.querySelector(".btn-blue"); btnBlue.ontouchstart = function(){ this.className = "btn-blue btn-blue-on" } btnBlue.ontouchend = function(){ this.className = "btn-blue" } </script> </body> </html>
4.10 屏幕旋转的事件和样式
-
事件:
window.orientation
,取值:正负90表示横屏模式、0和180表现为竖屏模式。window.onorientationchange = function(){ switch(window.orientation){ case -90: case 90: alert("横屏:" + window.orientation); case 0: case 180: alert("竖屏:" + window.orientation); break; } }
-
样式:
//竖屏时使用的样式 @media all and (orientation:portrait) { .css{} } //横屏时使用的样式 @media all and (orientation:landscape) { .css{} }
4.11 移动端常见的一些功能
-
摇一摇功能:
HTML5 deviceMotion
:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。 -
手机拍照和上传图片:
<input type="file">的accept 属性 <!-- 选择照片 --> <input type=file accept="image/*"> <!-- 选择视频 --> <input type=file accept="video/*">
使用总结:
iOS
有拍照、录像、选取本地图片功能。- 部分
android
只有选取本地图片功能。 winphone
不支持。input
控件默认外观丑陋。
-
消除
transition
闪屏:.css{ /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/ -webkit-transform-style: preserve-3d; /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/ -webkit-backface-visibility: hidden; }
-
开启硬件加速:
- 解决页面闪白。
- 保证动画流畅。
.css { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
-
android
上去掉语音输入按钮:input::-webkit-input-speech-button {display: none}
4.12 如何禁止百度转码?
<meta http-equiv="Cache-Control" content="no-siteapp" />
4.13 怎样默认优先使用最新版本IE和Chrome?
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />