移动端页面滚动条的问题，能帮我看看吗？ - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
已注册用户请 &
- a JavaScript code quality tool
移动端页面滚动条的问题，能帮我看看吗？
11:43:01 +08:00 · 1111 次点击
我在移动端页面上写了个页面。
&div class=&Box&&
&div class=&b&&
&div class=&c&&
Box 包住 b 和 c
Box 的样式 fixed，高度 100%，overflow：hidden
左右两列，高度不固定，overflow：auto ；
b 和 c 超出 box 的时候 都会出现滚动条 分别滚动。
现在的问题是
有时候 b，c 滚着滚着 就滚不动了。比如左边滚一下 右边就不能滚了。
请问有遇到这个问题的吗？ 我该怎么去查找这方面的资料呢？ 试了很多方法 都不行。
4 回复 &| &直到
17:51:48 +08:00
& & 13:50:57 +08:00
Box 都 overflow:hidden 了，你确定里面的 b 和 c 高度超出还能滚动？最好能贴出完整代码看一下。这种布局问题一般只能自己做实验找原因，或者换其它类似布局。
& & 17:29:16 +08:00
移动端对 overflow:auto 支持不太好，滑动一般用 IScroll、JRoll 这类插件
& & 17:31:27 +08:00
移动端对 overflow:scroll 支持不行，一般用 iscroll，虽然 iscroll5 基本也不维护了。可以参考当时写的玩具：
& & 17:51:48 +08:00
槽点略多 Box { overflow: } 即便子元素超高也不会滚动的...还是贴代码吧 -。-
& · & 1821 人在线 & 最高记录 3762 & · &
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.1 · 16ms · UTC 04:48 · PVG 12:48 · LAX 21:48 · JFK 00:48? Do have faith in what you're doing.怎么用div实现页面上下部分固定,中间部分随滚动条移动而移动的代码
按时间排序
1、头部定义一个div，固定高度，设置绝对定位(position:absolute)，设置上边距(top:0);2、底部定义一个div，固定高度，设置绝对定位(position:absolute)，设置下边距(bottom:0);3、中间定义一个div，设置滚动条自动( overflow: auto); 设置绝对定位(position:absolute)，设置top和bottom，top的值等于头部div的高度，bottom的值等于底部div的高度示例&html&&head&
&meta http-equiv=&Content-type& content=&text/ charset=UTF-8& /& &title&&/title& &style&
#page{margin:0width:960}
#header{width:960 height:60 position: top:0;background-color:#}
#footer{width:960 height:30 position: bottom:0; background-color:#}
#content{width:960 overflow: position: top:60 bottom:30} &/style&&/head&&body&&div id=&page&& &div id=&header&&定义顶部&/div&
&div id=&content&&content定义中间&/div& &div id=&footer&&footer定义底部&/div&&/div&&/body&&/html&
div设置成{position:}
.content1{ overflow: overflow-y: SCROLLBAR-FACE-COLOR:#205e17;
SCROLLBAR-SHADOW-COLOR:#86ff92;SCROLLBAR-SHADOW-COLOR:#86ff92;SCROLLBAR-3DLIGHT-COLOR:#205e17;SCROLLBAR-TRACK-COLOR:#205e17;SCROLLBAR-DARKSHADOW-COLOR:#205e17;SCROLLBAR-BASE-COLOR:#205e17;SCROLLBAR-ARROW-COLOR:#86ff92; height:700 width:748}中间的div就用下面的，样式是上面的。&div class=&content1&&&div&
感谢您为社区的和谐贡献力量请选择举报类型
经过核实后将会做出处理感谢您为社区和谐做出贡献
确定要取消此次报名，退出该活动？
请输入私信内容：在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如题：移动端页面过长，DOM过多，导致滑动页面时会出现卡顿现象，混动不流畅，体验比较差，请问各位有无解决方案或者思路？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
建议chrome profile分析一下，依据经验来看，如果是单纯的长页面应该不至于在滚动的时候出现卡顿，看一下是否页面内元素有未处理的touchmove事件冒泡给了documentbody，导致页面滑动时频繁触发事件；
还有一种可能是移动端页面上大量应用一些伪元素来模拟原生效果，比如0.5px的线条，如果布局不合理很有可能在页面滚动时造成大面积paint，gpu ram瞬间飙涨，fps极速下降。
超长页面节约内存的办法，在滚动的时候，将不在当前屏幕内的节点直接回收掉，可以做上中下三屏缓存（具体可以参考一下淘宝m站点的做法，首次只加载10个items，当离开屏幕区域的items超过30个时（印象中大概是如此的），将离开的这些items直接戳上一个回收标记，只要戳上这个标记的item就可以被安全地回收掉。）
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
首先可以精简dom的层级,一个img能定位的就别外面再套一层div,一个a能做到的就别在里面再写p,这样做了一般在ios就不会很卡了
如果还是卡的话可以试试滚动到下面的时候js去hide掉顶层的数据,滚动回去的时候再show出来
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我觉得页面过长不是主因，题主八成用了视差滚动之类的东西，导致页面滚动的时候总是回流。试着把特效都关掉再看看卡不卡
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
常见思路：html5的性能跟不上的时候就用原生控件。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
&img src="
该答案已被忽略，原因：
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。移动Web开发中的常见布局方式及一些常见问题 - 简书
移动Web开发中的常见布局方式及一些常见问题
一、流式布局
1.1 什么是流式布局
流式布局就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充，同时会设定最小宽度和最大宽度，适用于图片比较多的首页、门户、电商等。
在这里我们以京东的M站为例进行说明：
可以看到，在京东各个模块的主容器中，都设置了最大最小宽度和宽度100%，而在导航区块中，由于一行有5个小区块，所以设置了宽度为20%，使得小区块也能达到自适应的效果。
1.2 viewport
在移动端用来承载网页的这个区域就是我们的视觉窗口viewport，这个区域可以设置高度宽度，可以按比例放大缩小，而且能设置是否允许用户自行缩放。
viewport.jpg
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简介
它是由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"&
此处的代码会显示在一个固定宽度且居中的容器中
该容器的宽度会跟随屏幕的变化而变化
栅格系统：Bootstrap中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列，然后通过col-xx-xx的类名控制每一列的占比。
因为每一个列默认有一个15px的左右外边距。
row类的一个作用就是通过左右-15px屏蔽掉这个边距。
&div class="container"&
&div class="row"&&/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&
hidden类：设置在不同的屏幕下隐藏。
&div class="hidden-xs,hidden-sm,hidden-md,hidden-lg"&
text-xx类：设置文字的对齐方式。
text-center
文本左对齐
text-right
文本右对齐
pull-xx类：设置浮动。
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
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&
&!-- ...更多的 --&
.carousel-inner是所有轮播项的容器盒子，
注意role="listbox"代表当前div是一个列表盒子，作用就是给当前div添加一个语义
&div class="carousel-inner" role="listbox"&
&!-- 每一个.item就是单个轮播项目，注意默认要给第一个轮播项目加上active，表示为焦点 --&
&div class="item active"&
&!-- 轮播项目中展示的图片 --&
&div class="carousel-caption"&
&!-- 标题或说明性文字，如果不需要，直接删除当前div.carousel-caption --&
&div class="item"&
&!-- ... --&
&!-- ... --&
&!-- 图片轮播上左右两个控制按钮，分别点击可以滚动到上一张和下一张 --&
&!-- 此处需要注意的是 该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 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&
2.2.5 函数库 underscoreJS
_.template：
&ol class="carousel-indicators"&
&!--渲染的HTML字符串--&
&div class="carousel-inner" role="listbox"&
&!--渲染的HTML字符串--&
/*取到模版当中的字符串*/
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 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=""/&
&%} else {%&
&a href="#" class="pc_imgBox" style="background-image:url(&%=obj.bac%&)"&&/a&
三、rem布局
准备编辑这段时发现简书上已经有作者写了关于rem布局的介绍，并且他的设置比我所用的更加简洁，贴上地址供大家学习参考。
四、移动web开发中的常见问题
4.1 移动端如何定义字体font-family?
三大手机系统的字体：?
iOS 系统：
默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体
Android 系统：
默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans?
无微软雅黑字体
Winphone 系统：
默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoeod
无微软雅黑字体
各个手机系统有自己的默认字体，且都不支持微软雅黑，如无特殊需求，手机端无需定义中文字体，使用系统默认英文字体和数字字体可使用Helvetica，三种系统都支持。
/* 移动端定义字体的代码 */
font-family:H
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) {
font-size: 15px
@media screen and (min-width:640px) and (max-width:719px) {
font-size: 20px
@media screen and (min-width:720px) and (max-width:749px) {
font-size: 22.5px
@media screen and (min-width:750px) and (max-width:799px) {
font-size: 23.5px
@media screen and (min-width:800px) and (max-width:959px) {
font-size: 25px
@media screen and (min-width:960px) and (max-width:1079px) {
font-size: 30px
@media screen and (min-width:1080px) {
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:}可以阻止默认情况的发生：阻止页面滚动。
MSPointerUp——当手指离开屏幕时触发。
4.4 如何解决移动端click屏幕产生200-300ms的延迟响应问题？
移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。
解决方案：
fastclick可以解决在手机上点击事件的300ms延迟。
zepto的touch模块，tap事件也是为了解决在click的延迟问题。
触摸事件的响应顺序：
ontouchstart
ontouchmove
ontouchend
解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应。
4.5 什么是Retina 显示屏，带来了什么问题？
retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个。
在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。
那么，前端的应对方案是：
设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2。
//例如图片宽高为：200px*200px，那么写法如下
.css{width:100height:100background-size:100px 100}
其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px。
.css{font-size:20px}
4.6 移动端如何取消touch高亮效果？
在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类:active的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来进行全局的禁止：
-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-
-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符。
另外，有些机型去除不了，如小米2。对于此类问题还有个办法，不使用a或者input标签，直接用div标签。
winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉？
&meta name="msapplication-tap-highlight" content="no"&
4.7 关于webkit表单的几个问题
webkit表单元素的默认外观怎么重置？
.css{-webkit-appearance:}
webkit表单输入框placeholder的颜色值能改变么？
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEE}
webkit表单输入框placeholder的文字能换行么？
iOS可以，Android不行。
如何禁止文本缩放?？
当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：
-webkit-text-size-adjust: 100%;
需要注意的是，PC端的该属性已经被移除，该属性在移动端要生效，必须设置meta viewport。
4.8 如何在移动端禁止用户选中内容？
如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：
.user-select-none {
-webkit-user-select:
/* Chrome all / Safari all */
-moz-user-select:
/* Firefox all （移动端不需要） */
-ms-user-select:
/* IE 10+ */
4.9 如何模拟按钮的hover效果？
移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下：
&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:height:42line-height:42text-align:border-radius:4font-size:18color:#FFFFFF;background-color: #4185F3;}
.btn-blue:active{background-color: #357AE8;}
&div class="btn-blue"&按钮&/div&
&script type="text/javascript"&
document.addEventListener("touchstart", function(){}, true)
兼容性ios5+、部分android 4+、winphone 8
要做到全兼容的办法，可通过绑定ontouchstart和ontouchend来控制按钮的类名。
&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:height:42line-height:42text-align:border-radius:4font-size:18color:#FFFFFF;background-color: #4185F3;}
.btn-blue-on{background-color: #357AE8;}
&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"
4.10 屏幕旋转的事件和样式
事件：window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式。
window.onorientationchange = function(){
switch(window.orientation){
alert("横屏:" + window.orientation);
alert("竖屏:" + window.orientation);
//竖屏时使用的样式
@media all and (orientation:portrait) {
//横屏时使用的样式
@media all and (orientation:landscape) {
4.11 移动端常见的一些功能
摇一摇功能：
HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。
手机拍照和上传图片：
&input type="file"&的accept 属性
&!-- 选择照片 --&
&input type=file accept="image/*"&
&!-- 选择视频 --&
&input type=file accept="video/*"&
使用总结：
iOS有拍照、录像、选取本地图片功能。
部分android只有选取本地图片功能。
winphone不支持。
input控件默认外观丑陋。
消除transition闪屏：
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-transform-style: preserve-3d;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
-webkit-backface-visibility:
开启硬件加速：
解决页面闪白。
保证动画流畅。
-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" /&
日行万步路，夜读十页书。
mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 移动端统计 (from BiosSun) 可基于下方所列出的统计数据来决...
问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 {margin...
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面//一、HTML页面结构 // width
设置viewport宽度，为一个正整数，或字符串‘device-width’// height
设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置/...
meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari 将网站添加到主屏幕快速启动方式，仅针对ios的safa...
选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，list－style 优先 计算方法 a－＝＝＝行内样式 b－id选择器的数量 c＝类，伪类和属性选择器的数量 d＝标签选择器和微元素选择器的数量 value＝a*...
二十几年，坑洼不断，磕磕绊绊，一个山峰一片平原。小山小水小人间，只识得，大风大浪大场面，从未见。 开花结果，又是春天，童年茁壮成少年，少年葱翠到青年，不觉梦淡。 那年初三，还不太会玩手机，却总有思绪万千，把心里的想说的写在本上。初中三年有一段孤独的路一个孤单的时间段，因为孤...
主教练就是球队的核心人物，现役联盟中有像科尔和波波维奇这种有极强临场指挥能力的教练，也有像里弗斯这种战术大师，甚至有纪律严明的锡伯杜和死草23号的泰伦卢。 无论如何，主教练都是球队战术体系甚至是球员能否打出更好表现的重要一环。接下来我们就来看看本赛季至今整体表现最好的主教练...
电影《让子弹飞》有这么一个情节，姜文：你给我他妈的翻译一下他妈的到底什么是他妈的惊喜，你给我他妈的翻译一下他妈的到底什么是他妈的惊喜。 惊喜，就是这么特么的被惊喜出现了。 虽然到现在我都还没特么的明白惊喜特么的到底是什么。 这部电影看完有很长一段时间了，今个在重新翻来回想，...
如果将来的你愿意爱我 我会将我的一切都给你 我的善良我最好的东西 也希望你能好好照顾我 这个有点孩子气的姑娘 如果将来的你愿意爱我 哪怕将来的你一无所有 我也会陪你共同去努力 一点一滴建立我们的家 粗茶淡饭对我也是幸福 如果将来的你愿意爱我 我的缺点和我的坏习惯 我会用余生...