[学习交流] 【广州前端】移动端的web开发技巧(二)之常见问题

本帖最后由 AMay 于 2018-8-7 10:52 编辑

查看更多精彩前端资源

【简介】

移动端得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标签属性来关闭掉：

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【广州前端】移动端的web开发技巧(二)之常见问题

0 个回复