html5移动端开发

港控/mmm° 2022-07-19 05:20 292阅读 0赞

# 第一章 APP分类 #

*  native app
 *  web app
 *  hybid app
 *  移动web（移动web站点，web触屏版）

# 第二章 移动端web开发要面对的问题 #

## 2.1兼容问题 ##

UC、Chrome、Safari、QQ浏览器、百度浏览器、360浏览器等手机上的浏览器几乎全部都是基于webkit内核

## 2.2适配问题 ##

首先采用百分比自适应布局（即流式布局）  
同时，需要对一定段的viewprot视口进行设置，就能达到适配的目的

# 第三章 viewport（视口） #

浏览器上承载着viewport，viewport承载着网页。  
viewport是一个虚拟的窗口，它支持放大缩小。

## 3.1viewport是什么？ ##

在移动端用来承载网页的一个区域，就是我们的视觉窗口–viewport。这个区域可以设置宽高，可以按比例放大缩小，而且能设置是否允许用户自行缩放。  
viewport有默认的宽高，在iphone4中默认为980px\*1000px。二手机屏幕的宽高并没有这么多，故此之鞥将网页缩放显示在屏幕上，这样势必会导致网页的内容特别小，看不清。  
所以现在就需要将viewport设置成和手机屏幕相同的尺寸就OK。设置方法：

# 3.2PC页面在手机上缩放的原因 #

*  iPhone4中默认的viewport 980px\*1000px,user-scalable=yes
 *  那么initial-scale在320px的浏览器上就是320/980=0.333333

# 3.3标准的移动web页面 #

使用meta标签吧viewport的宽度设为device-width，同事initial-scale=1.0，user-scalable=no

# 3.4viewport参数 #

*  width：宽度设置是viewport的宽度，可以设置device-width特殊值
 *  initial-scale：初始化缩放比，大于0的数字，一般设为1.0
 *  minimum-scale：足校缩放比，大有0的数字，一般设为1.0
 *  maximum-scale：最大缩放比，大于0的数字，一般设为1.0
 *  user-sacable：用户是否可以缩放，yes或no（1或0）

# 第四章 踩过的那些坑 #

## 4.1 rgba与opacity ##

rgba中的第四个值可以设置透明度，它与opacity不同的是，它的透明度设置不会影响盒子中的内容的透明度，而opacity设置之后连内容也随之变模糊了。

## 4.2 图片失真 ##

切图面对的问题：如果按照1:1的显示在移动设备当中图片会失真。

**原因是**：在高清屏中会用两个或两个以上的物理像素来显示实际的1px图片内容，那么其实就是相当于把1px的图片放大显示了，所以有毛边的图片一般都会失真，也就是显示模糊。

**解决方案**：采用压缩图片尺寸的方式来解决。  
如果是img直接设置宽高的方式来压缩；  
如果是background-image设置background-size的方式来压缩

## 4.3img基线对齐 ##

**基线**：abcdyxz这行字母的y底下就会多出一点来，这是因为文字以基线对齐。同样的，img标签也是inline-block元素，以基线对齐，底下就会出现一小点空白。  
**解决方案**：

*  方法1：给img设置display:block;
 *  方法2：给img的父级设置font-size:0;
 *  方法3：给img设置vertical-align:middle

## 4.4移动端页面点击穿透 ##

### 4.4.1click与300ms延迟 ###

移动端浏览器提供一个特殊的功能：双击（double tap）放大。  
300ms的延迟就是来自这里，用户碰触页面之后，需要等待一段时间来判断是不是双击动作，而不是立即响应单击（click），等待的这段时间大约是300ms。

移动端事件提供touchstart、touchmove、touchend却没有提供tap的支持，主流框架（库）都是手动实现了自定义的tap事件，以求消除300ms的延迟，提高页面的响应速度。

### 4.4.2穿透产生的原因 ###

混用tap和click就会导致点击穿透的问题，因为click是在tap系列事件发生后大约300ms才触发的。

### 4.4.3点击穿透现象 ###

**1）点击蒙层（mask）上的关闭按钮，蒙层消失时发现触发了按钮下面元素的click事件**

蒙层的关闭按钮绑定的是tap事件，而按钮下面元素绑定的是click事件，tap事件触发后，蒙层消失了，300ms这个点的click事件fire，event的target自然就是按钮下面的元素，因为按钮跟蒙层一块消失了。  
**2）如果按钮下面恰好是一个href属性的a标签，那么页面就会发生跳转。**

因为a标签跳转默认是click事件触发。  
**3）直接点击页内按钮跳转至新页面，然后发现新页面中对应位置元素的clic事件被触发了。**

### 4.4.4解决方案 ###

问题已经很明了了，有很多解决方案，但思路不外乎2种：  
**1）不要混用tap和click**  
既然tap之后300ms会触发click，只用tap或者只用click就自然不会存在问题了  
**2）吃掉（或者说消费掉）tap之后的click**  
依旧用tap，只是在可能发生点击穿透的情形做额外的处理，拿个东西来挡住、或者tap后延迟350毫秒再隐藏mask、pointer-events、在下面元素的事件处理器里做检测（配合全局flag）等等，能吃掉就行

详细解决方案：  
**1）只用touch**  
最简单的解决方案，完美解决点击穿透问题  
把页面内所有click全部换成touch事件（ touchstart 、’touchend’、’tap’）， 需要特别注意 a标签，a标签的href也是click，需要去掉换成js控制的跳转，或者直接改成span + tap控制跳转。如果要求不高，不在乎滑走或者滑进来触发事件的话，span + touchend就可以了，毕竟tap需要引入第三方库

不用a标签其实没什么，移动app开发不用考虑SEO，即便用了a标签，一般也会去掉所有默认样式，不如直接用span

**2）只用click**  
下下策 ，因为会带来300ms延迟，页面内任何一个自定义交互都将增加300毫秒延迟，想想都慢

不用touch就不会存在touch之后300ms触发click的问题，如果交互性要求不高可以这么做， 强烈不推荐 ，快一点总是好的

**3）拿个东西来挡住**  
比较笨的方法， 千万不要用  
**4）tap后延迟350ms再隐藏mask**  
改动最小，缺点是隐藏mask变慢了，350ms还是能感觉到慢的

只需要针对mask做处理就行，改动非常小，如果要求不高的话，用这个比较省力

**5）pointer-events**  
比较麻烦且有缺陷， 不建议使用

mask隐藏后，给按钮下面元素添上 pointer-events: none; 样式，让click穿过去，350ms后去掉这个样式，恢复响应

缺陷是mask消失后的的350ms内，用户可以看到按钮下面的元素点着没反应，如果用户手速很快的话一定会发现

## 4.5iphone全屏布局问题 ##

开发的页面在Android上面看时，页面的顶部是在状态栏以下的位置的，而在ios上面看时，页面的顶部和状态栏顶部对齐了，即页面上边部分内容被状态栏挡住了，出现这个问题的原因是iphone讲求“全屏布局”。

解决问题的办法就是：  
在一个公共的（每个页面都需要引入）js文件中，加入以下代码，动态判断当前是不是IOS系统，如果是，则在页面顶部加入大约15px高度的一个div

var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if(isIOS){
        var perDiv = '<div style="width:100%;height:1.5rem;background:#19273F;position:fixed;z-index:10;top:0;"></div>';
        $(".sinoiov-bar-nav").before(perDiv).css("top","1.4rem");
        $(".sinoiov-has-header").css("margin-top","6.3rem");
        }

## 4.6 reset css ##

*,::before,::after{ margin:0; padding:0; /*清楚移动端默认点击高亮*/ -webkit-tap-heightlight-color:transparent; /*因为使用百分比布局，如果加上padding或者border，就有可能超出屏幕宽度，故设置盒子尺寸以边框开始计算*/ -webkit-box-sizing:border-box; box-sizing:border-box; }
    body{ font-size:16px; font-family:"MicroSoft YaHei",Sans-Serif; color:#333; }
    a{ color:#333; text-decoration:none; }
    a:hover{ text-decoration:none; }
    ul,ol{ list-style:none;}
    input{ border:none; outline:none; /*清除移动端默认表单样式*/ -webkit-appearance:none; }

## 4.7 common css ##

.left{ float:left;}
    .right{ float:right;}
    .clearfix::before,.clearfix::after{ content:''; height:0; line-height:0; display:block; visibility:hidden; clear:both; }

## 4.8导航栏左侧的返回按钮 ##

可以使用JavaScript中的`history.go(-1)`的方式实现返回按钮，但是这样做有很大的局限性。就是只能是一级一级向上返回，有时候业务逻辑并不是一级一级返回的。最常见的场景就是充值，付款时。

这时就需要自己实现上述功能。实现的思路是每请求一次URL，判断栈最后面的URL是否等于当前的URL，如果不等于，则就向栈中push当前的URL，如果等于，则什么都不做；点击返回按钮时，pop掉栈中最后一个元素，并重定向到栈中的最后一个URL。

localStorage.clear();
    window.vehicle.setHistory(window.location.href);

window.vehicle.goBack();