移动端开发注意事项

时间 2019-11-12

原文原文链接

移动端开发中须要注意的事项，以及可能须要用到一些框架，尾部总结了一些主流框架，若是你以为有用的话，请点击推荐，谢谢！php

1、关于meta

常见的公共meta属性：css

一、viewport

width=device-width 宽度是设备屏幕的宽度（像素）
height =device-height 高度时设备屏幕的高度（像素）
initial-scale 初始的缩放比例
minimum-scale 容许用户缩放到的最小比例
maximum-scale 容许用户缩放到的最大比例
user-scaleable 用户是否能够手动缩放

二、Format-detection

format-detection翻译成中文的意思是“格式检测”，顾名思义，它是用来检测html里的一些格式的，那关于meta的format-detection属性主要是有如下几个设置：前端

meta name="format-detection" content="telephone=no"
meta name="format-detection" content="email=no"
meta name="format-detection" content="adress=no"
也能够连写：meta name="format-detection" content="telephone=no,email=no,adress=no"

若是禁用，咱们调用拨号功能能够这么写！

　　以下：<a href="tel:4008106999,1034">400-810-6999 转 1034</a>java

拨打手机直接以下 <a href="tel:15677776767">点击拨打15677776767</a>

　　安卓手机会直接到号码输入拨打的界面。jquery

　　点击拨号苹果手机就会出现以下图：android

三、http-equiv

http-equiv顾名思义，至关于http的文件头做用，它能够向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 meat标签的http-equiv属性语法格式是：＜meta http-equiv="参数" content="参数变量值"＞；
这个属性是很老的属性了，通常手机网页都是要有必定缓存的，因此这个能够不用设置

2、IOS私有meta属性

一、第一个meta：

说明：

网站开启对web app程序的支持。
若是content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你能够经过只读属性window.navigator.standalone来肯定网页是否以全屏模式显示。

为了更好的兼容，两个meta能够都写上！

二、第二个meta：

说明：

在web app应用下状态条（屏幕顶部条）的颜色；
默认值为default（白色），能够定为black（黑色）和black-translucent（灰色半透明）。
注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

3、IOS其余私有设置

添加主屏以后，桌面图片和启动画面如何设置呢？

一、桌面图标设置：

二者的区别以下：

第一种会有一个光感，第二种是设计原图显示！

二、启动画面的设置：

固然，能够指定不一样尺寸。

4、其余浏览器私有meta属性【除非特需，通常不推荐使用】

一、QQ浏览器私有

全屏模式：<meta name="x5-fullscreen" content="true">
强制竖屏：<meta name="x5-orientation" content="portrait">
强制横屏：<meta name="x5-orientation" content="landscape">
应用模式：<meta name="x5-page-mode" content="app">

二、UC浏览器私有

全屏模式：<meta name="full-screen" content="yes">
强制竖屏：<meta name="screen-orientation" content="portrait">
强制横屏：<meta name="screen-orientation" content="landscape">
应用模式：<meta name="browsermode" content="application">

三、其它

针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，好比黑莓

<meta name="HandheldFriendly" content="true">

微软的老式浏览器
<meta name="MobileOptimized" content="320">

windows phone 点击无高光
<meta name="msapplication-tap-highlight" content="no">

5、关于样式

一、上下拉动滚动条时卡顿、慢

body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}

二、禁止复制、选中文本

Element {
       -webkit-user-select: none;
       -moz-user-select: none;
       -khtml-user-select: none;
         user-select: none;
}
解决移动设备可选中页面文本(视产品须要而定)

三、长时间按住页面出现闪退

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

四、iphone及ipad下输入框默认内阴影

Element{
-webkit-appearance: none;
}

五、ios和android下触摸元素时出现半透明灰色遮罩

Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
设置alpha值为0就能够去除半透明灰色遮罩，备注：transparent的属性值在android下无效。

六、active兼容处理

七、动画定义3D启用硬件加速

Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
注意：3D变形会消耗更多的内存与功耗

八、Retina屏的1px边框

Element{
border-width: thin;
}

九、旋转屏幕时，字体大小调整的问题

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}

十、transition闪屏

/设置内嵌的元素在 3D 空间如何呈现：保留3D /

-webkit-transform-style: preserve-3d;

/ 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /

-webkit-backface-visibility:hidden;

十一、圆角bug

某些Android手机圆角失效

background-clip: padding-box;

6、关于HTML5

HTML5 中的一些有趣的新特性：

一、用于绘画的 canvas 元素
二、用于媒介回放的 video 和 audio 元素

demo:

<video width="320" height="240" controls="controls">
你浏览器不支持video
</video>

同理：

<audio controls="controls">
你浏览器不支持audio
</audio>

三、对本地离线存储的更好的支持

四、地理定位 navigator.geolocation.getCurrentPosition(callback,error,options)
五、新的特殊内容元素，好比 article、footer、header、nav、section
六、新的表单控件：

email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

7、移动端开发流行的框架

移动前端开发IDE

我用的是webstorm
比较流行的是sublime

前端开发环境

前端作好了以后，要根据后台返回的接口来绑定页面（也就是咱们一般说的套页面）。
假如后台是java写的，咱们要搭建java环境
若是后台是php写的，咱们要搭建php环境。

tochweb（手机网站）ios

web-app（phoneGap appcan打包成安卓apk和苹果ios格式）css3

hybrid-app（主流）web

native-app

8、移动端主流的css框架

一、bootstrap响应式布局

网址：http://www.bootcss.com

二、css3动画

网址：http://www.haorooms.com/uploads/example/Animatecss/
更多框架：http://nec.netease.com/framework

三、icon字体

网址：http://fontawesome.io/
网址：http://www.iconfont.cn/

四、css的SASS和Less框架

9、移动端主流的js框架

一、zeptiojs

网址：http://zeptojs.com

二、jGestures

网址：http:jgestures.codeplex.com/

三、swiper

网址：http://www.swiper.com.cn

四、iscroll.js

网址：http://cubiq.org/iscroll-5
网址：http://iscrolljs.com/