移动web开发经验与常见问题总结

深藏阁楼爱情的钟 2022-06-12 07:57 203阅读 0赞

## 1.1 移动web ##

### 1.1.1 三种布局 ###

*  有最大、最小宽度的百分比自适应布局  
    **适用场景：**门户网站首页，图片较多的首页。
 *  百分比自适应布局  
    **适用场景：**信息文字较多的网页，内容较多网页。
 *  全屏自适应布局  
    **适用场景：**单页面网页，移动web app 页面。

### 1.1.2 Box-sizing在移动端的使用 ###

在百分比定宽的页面经常使用。

*,
    ::before,
    ::after{ -webkit-box-sizing: border-box; /*以你的border开始计算你的宽度*/ }

## 1.2 移动端事件 ##

### Touch ###

*  **touchstart**：当手指触碰屏幕时候发生。不管当前有多少只手指
 *  **touchmove**：当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，  
    会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
 *  **touchend**：当手指离开屏幕时触发
 *  **touchcancel**：系统停止跟踪触摸时候会触发。  
    例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用

**触摸事件的响应顺序**  
1、ontouchstart  
2、ontouchmove  
3、ontouchend  
4、onclick 300ms延时

### Event ###

*  originalEvent （原生事件） 是jquery 封装的事件。
 *  targetTouches 目标元素的所有当前触摸
 *  changedTouches 页面上最新更改的所有触摸
 *  touches 页面上的所有触摸

> clientX、clientY 相对于当前屏幕的X或Y位置  
> pageX、pageY 相对于整体页面的X或Y位置

*  transitionEnd 过渡结束事件。
 *  animationEnd 动画结束事件

**移动端事件框架**  
例如 zepto touch.js

'swipe', 
    'swipeLeft', 
    'swipeRight', 
    'swipeUp',
    'swipeDown',
      'doubleTap', 
    'tap', 
    'singleTap', 
    'longTap'

都是由我们的原生touch事件封装的。

## 1.3 常见的移动端问题 ##

### 1.3.1 什么是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}

### 1.3.2 百度禁止转码 ###

通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们可以通过这个meta标签来禁止它：

### 1.3.3 移动端手机号码识别（IOS） ###

在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如:

*  7位数字，形如：1234567
 *  带括号及加号的数字，形如：(+86)123456789
 *  双连接线的数字，形如：00-00-00111
 *  11位数字，形如：13800138000
 *  可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别：

### 1.3.4 移动端邮箱识别（Android） ###

与电话号码的识别一样，在安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的meta来管别邮箱的自动识别：

### 1.3.5 ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 ###

ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩。

{ -webkit-tap-highlight-color: rgba(0,0,0,0;)}
    
    1.3.6   webkit表单元素的默认外观怎么重置
    .css{ -webkit-appearance:none;}

### 1.3.7 禁止文本缩放 ###

当移动设备横竖屏切换时，文本的大小会重新计算（或者在内嵌浏览器中设置字体的大小），进行相应的缩放，当我们不需要这种情况时，可以选择禁止：

html { 　　-webkit-text-size-adjust: 100%; }

### 1.3.8 移动端禁止选中内容 ###

如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：

.user-select-none {
      -webkit-user-select: none;
    ｝

### 1.3.9 如何禁止保存或拷贝图像（IOS） ###

通常当你在手机或者pad上长按图像 img ，会弹出选项存储图像 或者拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：

img { -webkit-touch-callout: none; }

### 1.3.10 摇一摇功能 ###

HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

### 1.3.11 android 上去掉语音输入按钮 ###

input::-webkit-input-speech-button {
       display: none}

### 1.3.12 移动端基础框架 ###

[zepto.js][]语法与jquery几乎一样，会jquery基本会zepto；  
搭配  
backbone underscore  
[http://daneden.github.io/animate.css/][http_daneden.github.io_animate.css] 动画css

[zepto.js]: http://zeptojs.com/
[http_daneden.github.io_animate.css]: http://daneden.github.io/animate.css/