移动web开发常见问题

1. meta标签

head标签部分添加以下代码： ~~ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-touch-fullscreen">
<meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no,email=no" name="format-detection">

<!--[if lt IE 9]> <script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

~~

1. 第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，文档初始化缩放比例是1:1，不允许用户点击屏幕放大浏览，允许用户缩放到的最大比例。尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。其他属性有：width;height; initial-scale; minimum-scale; maximum-scale; user-scalable; 1.1 这是因为，还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。
2. 第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
3. 第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
4. 第四个meta标签表示：告诉设备不识别邮件和忽略将页面中的数字识别为电话号码
5. IE8或者更老的浏览器不支持媒体查询。你可以使用media-queries.js或者respond.js来在IE中添加对媒体查询的支持

2. iPhone的retina屏幕

1. CSS的1像素等于两个无力像素，正常设备是360x480,但是UI给的精灵图却是640x960，因此在取背景position的时候，坐标要缩小两倍

3. flex布局

1. flex元素中嵌套flex 三星手机出错，必须父元素为flex，而其它祖先元素为block
2. 用Flexbox做等分时，记得给宽度。不然Android里如果内容字数不一样，会撑开

4. background-size:100% auto

1. 部分安卓机不支持该属性在background中的连写，必须拆分开来。例如：background：url(img.jpg) no-repeat/100% 100%,部分安卓机图片直接不显示

5. 外观

1. border-radius百分比失效，环境Android2.3.x，解决方案：设置一个较大值如border-radius:9999px
2. placeholder属性设置的文字向上偏移的厉害，环境Android4.x部分机型，解决方案：line-height:normal
3. body设置100%高度后，在移动浏览器里面可能会被底部的导航栏挡住:各移动浏览器经常出现，document.documentElement.style.height = window.innerHeight + 'px'

6. boostrap响应式布局的坑

1. 轮播图在移动端和PC端是两套代码，PC端采用的是一张大图片，两边有较大的颜色留白，高度不变，随着屏幕变小，内容朝中间集中，采用a链接里面放置背景图片，background-size:cover ,background-position:center；在移动端，直接是a链接里面放置一个图片标签，宽度100%，高度随着宽度变化而变化
2. boostrap改变原有样式，自己去看代码结构，然后自己写，太麻烦，而应该是从原生的样式中找到，修改最外层的类名
3. 在媒体对象组件那里，是左边是一个图片，右边是a标签，如果想要让整个都被a标签包裹是不可以的，因为浏览器会把解析成两个不嵌套的a标签，所以要把里面的a标签改变成一个div，而样式不改变，因为Boostrap本身就把a变成了block 4.开发中less文件在sublime中转换成css的问题，以前用一个软件叫考拉，好麻烦，现在下载一个less2css插件，然后在npm中下载两个插件，每次一保存就可以直接在同级目录中生成一个css文件

7. 杂坑

1. 虽然移动端不用写:hover，但光写个:active是不够的。实测Android 2.3下按过的按钮会留下浏览器默认颜色，所以记得给:visited也加个颜色
2. 遇到写动画animation的时候，不要用到伪类上。不然Android是没效果的
3. text-indent和box-sizing 部分安卓机中使用text-indent属性会使元素宽度超过100%，加上box-sizing:border-box;修复正常
4. 在用户输入号码的表单中，需要禁止用户输入中文、符号等，减少用户输入出错误的可能性, 于是在全局样式中定义如下： .ime-disabled{ime-mode:disabled;}/* 屏蔽输入法 */ 在页面定义如下：

<input type="text" name="password" class="ime-disabled" > 5. fastclick可以解决在手机上点击事件的300ms延迟