【简介】
移动端得web开发技巧(一)之meta标签的使用，详情请看，上一篇文章的介绍。
移动web开发中常见的问题如下：
【1. 移动端如何定义字体font-family】
三大手机系统的字体：
ios 系统
- 默认中文字体是Heiti SC
- 默认英文字体是Helvetica
- 默认数字字体是HelveticaNeue
- 无微软雅黑字体
android 系统
- 默认中文字体是Droidsansfallback
- 默认英文和数字字体是Droid Sans
- 无微软雅黑字体
winphone 系统
- 默认中文字体是Dengxian(方正等线体)
- 默认英文和数字字体是Segoe
无微软雅黑字体
- 各个手机系统有自己的默认字体，且都不支持微软雅黑
- 如无特殊需求，手机端无需定义中文字体，使用系统默认
- 英文字体和数字字体可使用 Helvetica ，三种系统都支持
[CSS] 纯文本查看 复制代码
/* 移动端定义字体的代码 */
body{font-family:Helvetica;}
【2. 移动端字体单位font-size选择px还是rem】
对于只需要适配手机设备，使用px即可
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备
rem配置参考：
[CSS] 纯文本查看 复制代码
@media only screen and (max-width: 1080px),
only screen and (max-device-width: 1080px) {
html,
body {
font-size: 168.75px;
}
}
@media only screen and (max-width: 960px),
only screen and (max-device-width: 960px) {
html,
body {
font-size: 150px;
}
}
@media only screen and (max-width: 800px),
only screen and (max-device-width: 800px) {
html,
body {
font-size: 125px;
}
}
@media only screen and (max-width: 720px),
only screen and (max-device-width: 720px) {
html,
body {
font-size: 112.5px;
}
}
@media only screen and (max-width: 640px),
only screen and (max-device-width: 640px) {
html,
body {
font-size: 100px;
}
}
@media only screen and (max-width: 600px),
only screen and (max-device-width: 600px) {
html,
body {
font-size: 93.75px;
}
}
@media only screen and (max-width: 540px),
only screen and (max-device-width: 540px) {
html,
body {
font-size: 84.375px;
}
}
@media only screen and (max-width: 480px),
only screen and (max-device-width: 480px) {
html,
body {
font-size: 75px;
}
}
@media only screen and (max-width: 414px),
only screen and (max-device-width: 414px) {
html,
body {
font-size: 64.6875px;
}
}
@media only screen and (max-width: 400px),
only screen and (max-device-width: 400px) {
html,
body {
font-size: 62.5px;
}
}
@media only screen and (max-width: 375px),
only screen and (max-device-width: 375px) {
html,
body {
font-size: 58.59375px;
}
}
@media only screen and (max-width: 360px),
only screen and (max-device-width: 360px) {
html,
body {
font-size: 56.25px;
}
}
@media only screen and (max-width: 320px),
only screen and (max-device-width: 320px) {
html,
body {
font-size: 50px;
}
}
@media only screen and (max-width: 240px),
only screen and (max-device-width: 240px) {
html,
body {
font-size: 37.5px;
}
}
【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. 什么是Retina 显示屏，带来了什么问题】
retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个
在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍
那么，前端的应对方案是：
设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2
[CSS] 纯文本查看 复制代码
//例如图片宽高为：200px*200px，那么写法如下
.css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px
.css{font-size:20px}
【5. webkit表单输入框placeholder的颜色值能改变么】
[CSS] 纯文本查看 复制代码
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}【7. 移动端禁止选中内容】
如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：
[CSS] 纯文本查看 复制代码
.user-select-none {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all （移动端不需要） */
-ms-user-select: none; /* IE 10+ */
}【8. 移动端取消touch高亮效果】
在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来进行全局的禁止：
[HTML] 纯文本查看 复制代码
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}但这个方法在三星的机子上无效，有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签，可以解决这个问题。
【9. 如何禁止保存或拷贝图像（苹果）】
通常当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：
[CSS] 纯文本查看 复制代码
img {-webkit-touch-callout: none; } 【11. 关闭苹果键盘首字母自动大写】
在苹果中，默认情况下键盘是开启首字母大写的功能的，如果启用这个功能，可以这样：
【12. 关闭苹果输入自动修正】
和英文输入默认自动首字母大写那样，苹果还做了一个功能，默认输入法会开启自动修正输入内容，这样的话，用户经常要操作两次。如果不希望开启此功能，我们可以通过input标签属性来关闭掉：