HTML5移动端网页常用知识分享

本章节分享一下HTML5移动端网页布局常用的一些小的知识点。

需要的朋友可以做一下参考，都是一些非常基础的东西。

一.meta标签:

1.控制显示区域各种属性:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">。

width：viewport的宽度。

height：viewport的高度。

initial-scale：初始的缩放比例。

minimum-scale：允许用户缩放到的最小比例。

maximum-scale：允许用户缩放到的最大比例。

user-scalable：用户是否可以手动缩放。

2.IOS中Safari允许全屏浏览:

<meta content="yes" name="apple-mobile-web-app-capable">

3.IOS中Safari顶端状态条样式:

<meta content="black" name="apple-mobile-web-app-status-bar-style">

4.IOS中Safari设置保存到桌面图标:

需要在网站的根目录下存放favicon图标，防止404请求(使用fiddler可以监听到)

<link rel="apple-touch-icon" href="icon.png">

二.取消表单元素在点击态时的边框以及半透明灰色背景:

1 2 3

input, textarea, button, a{    -webkit-tap-highlight- color :rgba( 0 , 0 , 0 , 0 ); }

三.移除原生控件样式:

1 2 3

input,button,textarea {    -webkit-appearance: none ; }

四.使用rem来做响应式开发:

针对不同的设备，对页面rem做不同缩放:

01 02 03 04 05 06 07 08 09 10 11 12

html {    font-size : $baseFontSize;    @media screen and ( min-width : 320px ) {      font-size : $baseFontSize*. 9 ;    }    @media screen and ( min-width : 360px ) {      font-size : $baseFontSize;    }    @media screen and ( min-width : 400px ) {      font-size : $baseFontSize* 1.1 ;    } }

五.定义字体:

1 2 3

body{    font-family : Helvetica ; }

六.flex布局兼容性写法:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92

@mixin display-flex() {    display : -webkit-box;    display : -webkit-flex;    display : flex; }    // 参数：数字，默认： 1 @mixin flex($value: 1 ) {    -webkit-box-flex: $value;    -webkit-flex: $value;    flex: $value; }    // 参数：数字，默认： 1 @mixin order($value: 1 ) {    -webkit-box-ordinal-group: $value;    -webkit-order: $value;    order: $value; }    // 参数：row, row-reverse, column, column-reverse @mixin flex-direction($direction) {    @if ($direction == row) {      -webkit-box- direction : normal ;      -webkit-box-orient: horizontal;      -webkit-flex- direction : row;      flex- direction : row;    } @else if ($direction == row-reverse) {      -webkit-box-pack: end;      -webkit-box- direction : reverse;      -webkit-box-orient: horizontal;      -webkit-flex- direction : row-reverse;      flex- direction : row-reverse;    } @else if ($direction == column) {      -webkit-box- direction : normal ;      -webkit-box-orient: vertical;      -webkit-flex- direction : column;      flex- direction : column;    } @else if ($direction == column-reverse) {      -webkit-box-pack: end;      -webkit-box- direction : reverse;      -webkit-box-orient: vertical;      -webkit-flex- direction : column-reverse;      flex- direction : column-reverse;    } }    //  参数：flex-start, center , flex-end, space-between @mixin justify-content($value) {    @if ($value == flex-start) {      -webkit-box-pack: start;      -webkit-justify- content : flex-start;      justify- content : flex-start;    } @else if ($value == center ) {      -webkit-box-pack: center ;      -webkit-justify- content : center ;      justify- content : center ;    } @else if ($value == flex-end) {      -webkit-box-pack: end;      -webkit-justify- content : flex-end;      justify- content : flex-end;    } @else if ($value == space-between) {      -webkit-box-pack: justify ;      -webkit-justify- content : space-between;      justify- content : space-between;    } }    //  参数：flex-start, center , flex-end, baseline , stretch @mixin align-items($value) {    @if ($value == flex-start) {      -webkit-box-align: start;      -webkit-align-items: flex-start;      align-items: flex-start;    } @else if ($value == center ) {      -webkit-box-align: center ;      -webkit-align-items: center ;      align-items: center ;    } @else if ($value == flex-end) {      -webkit-box-align: end;      -webkit-align-items: flex-end;      align-items: flex-end;    } @else if ($value == baseline ) {      -webkit-box-align: baseline ;      -webkit-align-items: baseline ;      align-items: baseline ;    } @else if ($value == stretch) {      -webkit-box-align: stretch;      -webkit-align-items: stretch;      align-items: stretch;    } }

七.移动端touch事件:

当用户手指放在移动设备在屏幕上滑动会触发的touch事件

touchstart：当手指触碰屏幕时候发生。不管当前有多少只手指

touchmove：当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动

touchend：当手指离开屏幕时触发

touchcancel：系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用

八.click产生200-300 ms的延迟响应:

页面js捕获click事件的回调函数处理，需要300ms后才生效

解决方案：

1、fastclick可以解决在手机上点击事件的300ms延迟

2、zepto的touch模块，tap事件也是为了解决在click的延迟问题

九.按钮active态:

在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态

1 2 3

document.body.addEventListener( 'touchstart' , function () {    //空函数即可 });

原文发布时间为：2017-2-23

本文作者：admin

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落

原文链接：HTML5移动端网页常用知识分享