移動端開發注意事項

時間 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/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。