移動端開發(fā)注意事項

開發(fā)工具:Visual Studio Code及相關(guān)插件安裝

Easy LESS 當保存.less文件時自動生成.css文件

Less IntelliSense .less文件的自動提示功能

Beautify css/sass/scss/less 樣式文件格式化功能

Live HTML Previewer html預覽功能

HTML Snippets html標簽自動完成功能

JS-CSS-HTML Formatter html格式化功能

<!DOCTYPE html>

<html manifest="test.manifest">

<!--

CACHE MANIFEST

#我是注釋吨掌,這個文件名叫test.manifest

CACHE:

/test.css

/test.js

-->

? ? <head>

? ? ? ? <meta charset="utf-8"/>

? ? ? ? //自動適屏

? ? ? ? <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

? ? ? ? //禁止 iOS 識別長串數(shù)字為電話

? ? ? ? <meta name="format-detection" content="telephone=no" />

? ? ? ? <!--<a href="tel:4008106999,1034">400-810-6999 轉(zhuǎn) 1034</a>-->

? ? ? ? <!--<a href="sms:139xxxxxxx">一鍵發(fā)送短信</a>-->

? ? ? ? //不讓安卓手機識別郵箱

? ? ? ? <meta name="format-detection" content="email=no" />

? ? ? ? <!--<a href="mailto:peun@foxmail.com">peun@foxmail.com</a>-->

? ? ? ? //地址識別

? ? ? ? <meta name="format-detection" content="adress=no" />

? ? ? ? <!--蘋果safari特有屬性-->

? ? ? ? //全屏模式

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

? ? ? ? //頂部狀態(tài)欄背景色

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

? ? ? ? //設置緩存

? ? ? ? <meta http-equiv="Cache-Control" content="no-cache" />

? ? ? ? //圖標

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

? ? ? ? <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />

? ? ? ? <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />

? ? ? ? <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />

? ? ? ? <!--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"/>

? ? </head>

? ? <body>

? ? </body>

</html>

常用布局方式:

? ? ? ? 1.流式布局+百分比? ? float:left , float:right? center:100%;

? ? ? ? 一般手機端布局分為上(header)中(center)h和下(footer)三部分

? ? ? ? 常見布局:

? ? ? ? ? ? ? ? ? header部分height:45px;width:100%;

? ? ? ? ? ? ? ? ? position:fixed;

? ? ? ? ? ? ? ? ? top:0;

? ? ? ? ? ? ? ? ? left:0;

? ? ? ? ? ? ? ? ? ? center部分:position:fixed

? ? ? ? ? ? ? ? ? ? top:45px;

? ? ? ? ? ? ? ? ? ? bottom:45px

? ? ? ? ? ? ? ? ? ? footer部分:

? ? ? ? ? ? ? ? ? ? bottom:0;

? ? ? ? ? ? ? ? ? ? left:0;

? ? ? ? 2.彈性盒布局? display:flex;

? ? ? ? ? 任何一個容器都可以指定為Flex布局。

? ? ? ? ? ? ? ? ? .box{display: flex;}


? ? ? ? ? ? ? 行內(nèi)元素也可以使用Flex布局光绕。

? ? ? ? ? ? ? .box{ display: inline-flex;}

? ? ? ? ? ? ? Webkit內(nèi)核的瀏覽器童漩,必須加上-webkit前綴。

? ? ? ? ? ? .box{? display: -webkit-flex; /* Safari */


? ? ? ? ? ? display: flex;}

? ? ? 注意,設為Flex布局以后痴腌,子元素的float真朗、clear和vertical-align屬性將失效此疹。

? ? ? ? 3.rem 布局? ? font-size:1rem;

? ? (function (doc, win) {

? ? ? ? ? ? var docEl = doc.documentElement,

? ? ? ? ? ? resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

? ? ? ? ? ? recalc = function () {

? ? ? ? ? ? ? ? var clientWidth = docEl.clientWidth;

? ? ? ? ? ? ? ? if (!clientWidth) return;

? ? ? ? ? ? ? ? if(clientWidth>=640){

? ? ? ? ? ? ? ? ? ? docEl.style.fontSize = '100px';

? ? ? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? ? ? docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';

? ? ? ? ? ? ? ? }

? ? ? ? ? ? };

? ? ? ? ? ? ? if (!doc.addEventListener) return;

? ? ? ? ? ? win.addEventListener(resizeEvt, recalc, false);

? ? ? ? ? ? doc.addEventListener('DOMContentLoaded', recalc, false);

? ? ? ? ? })(document, window);

? 這是rem布局的核心代碼,

? 這段代碼的大意是:如果頁面的寬度超過了640px遮婶,那么頁面中html的font-size恒為100px蝗碎,否則,頁面中html的font-size的大小為: 100 * (當前頁面寬度 / 640)


? 于是旗扑,問題來了蹦骑,為什么要這樣?別急臀防,我先來一一回答

? 1. 為什么是640px眠菇?

? ? ? ? 對于手機屏幕來說,640px的頁面寬度是一個安全的最大寬度袱衷,保證了移動端頁面兩邊不會留白捎废。注意這里的px是css邏輯像素,與設備的物理像素是有區(qū)別的致燥。

? ? ? ? 如iPhone 5使用的是Retina視網(wǎng)膜屏幕缕坎,使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel,所以設備像素數(shù)為640 x 1136px篡悟,而它的CSS邏輯像素數(shù)為320 x 568px谜叹。

? ? ? ? 如果要切移動端頁面,你可以先把效果圖寬度等比例縮放到640px搬葬,很好用荷腊。

? 2. 為什么要設置html的font-size?

? ? ? ? rem就是根元素(即:html)的字體大小急凰。html中的所有標簽樣式凡是涉及到尺寸的(如: height,width,padding,margin,font-size女仰。甚至,left,top等)你都可以放心大膽的用rem作單位抡锈。

? ? ? ? 如果你把html的font-size設為20px疾忍,前面說過,rem就是html的字體大小床三,那么1rem = 20px一罩。此時,此時寬60px撇簿,高40px的元素樣式就這樣設置如下 ↓

? 3. width: 3rem;? height: 2rem;

? 那要是寬55px聂渊,高37px呢差购?然后經(jīng)過換算,汉嗽,設置如下 ↓

? width: 2.75rem;

? height: 1.85rem;

? 是不是發(fā)現(xiàn)這換算起來有點麻煩啊欲逃,,饼暑,(當然稳析,你要是心算帝請無視)

? 如果我們一開始把html的font-size設為100px呢?此時1rem = 100px弓叛,那么上面的寬55px迈着,高37px的元素樣式就可以這么設置 ↓

? width: 0.55rem;

? height: 0.37rem;

? 是不是換算起來簡單多了?邪码!

? 4.百分比布局? width:50%;

? ? 百分比布局就是在項目中所有元素的寬高都不設置固定大小,而是用百分比來控制其大小

? ? div{width:25%;heigt:20%;}

? 美工出圖原則:

? 分辨率寬度:

? ? ? ? ? ? 320? 480? 640? 960? 1280 1600 1920 (web分辨率均為320[320*480])

? ? ? ? ? ? 360? 720? 1080 1440 1800 (web分辨率均為360[360*640])

? 因此有兩套思路:

? 第一種是制作1920的psd圖,然后導出320的jpg或bmp圖裕菠。

? 其中的1920是320的6倍,然后高度闭专,寬度百分比均從320上切取奴潘。

? 新建文檔時1920*2880=(320*6)*(480*6);單位像素。

? 分辨率為432=(72*6);單位像素/英寸;

? 顏色模式:RGB顏色;

? alt+ctrl+i 可調(diào)整圖像大小及分辨率

? 第二種是制作1440的psd圖,然后導出360的圖影钉。

? 其中1440是360的4倍画髓,然后圖片均從360上切取。

? 新建文檔時1440是360的4倍平委,奈虾,然后高度,寬度百分比均從360上切取廉赔。

? 分辨率為288=(72*4);單位像素/英寸;

? 顏色模式:RGB顏色;

? alt+ctrl+i 可調(diào)整圖像大小及分辨率

? 第三種是制作寬度為320的圖肉微,并讓其居中。所有的圖片蜡塌,大小碉纳,均按固定的來。

? 這樣做的好處是兼容性強馏艾,且對前端的要求不高劳曹。

不過壞處是在某些分辨率下雖然布局不會亂,但看上去效果可能不太理想琅摩。

? 一般美工設計原則如下:

1.字體一般使用10px到16px,字體大小偶數(shù),特殊情況下需要特小字體的也可選用8px字體铁孵。

因為在480px及720px屏上實際顯示的字體大小為16px,并不會出現(xiàn)字體顯示不清晰的問題;

2.顏色一般選擇

對于黑白色房资,做為字體色及邊框色時蜕劝,僅能選擇如下幾種:

#ffffff;

#cccccc;

#999999;

#666666;

#333333;

#000000;

因為字體和邊框只能使用web色,而web色僅有216種,其中以上6種為非彩色志膀。

其它地方均可以采用真彩色(8+8+8=24位)熙宇,即2的24次方鳖擒,1677萬種顏色溉浙。

因此在設計某些顏色時烫止,如果背景和某種字體顏色相同,但顯示出的顏色卻不一樣戳稽。

是因為psd中字體的真彩色轉(zhuǎn)換為html時被瀏覽器轉(zhuǎn)換成了顏色值較少的web色馆蠕。

3.盡量不要使用過渡色,使用平面設計

因為大量的過渡色惊奇,非常消耗手機的cpu互躬,只有3d效果瀏覽器會用gpu(顯卡)渲染。

也就是說颂郎,只所以手機采用平面化設計是因為手機性能的原因吼渡。

4.關(guān)于優(yōu)化:

a.聯(lián)通3g下載速度為338kb/s,因此一個UI圖中所有圖片的大小不能超過1mb.因此圖片寬度不要超過640px

b.css3>svg>iconfont>webp>png8>gif>jpg

c.合并小圖片,把固定大小的圖標放入單一png中乓序。

d.不要使用除微軟件雅黑之外的非圖片字體寺酪。

//盒子模型

┌────────────────────────────────────────────────┐

│? ? margin? ? ? ? ? ? 15px? ? ? ? ? ? ? ? ? ? ? │

│? ? ┌──────────────────────────────────────┐? ? │

│? ? │? ? border? ? ? 1px? ? ? ? ? ? ? ? ? │? ? │

│? ? │? ? ┌────────────────────────────┐? ? │? ? │

│? ? │? ? │? padding? 4px? ? ? ? ? ? │? ? │? ? │

│? ? │? ? │? ┌────────────────────┐? │? ? │? ? │

│10px│ 1px│4px│? ? 200px*40px? ? │4px│ 1px│10px│

│? ? │? ? │? └────────────────────┘? │? ? │? ? │

│? ? │? ? │? ? ? ? ? ? 4px;? ? ? ? ? ? │? ? │? ? │

│? ? │? ? └────────────────────────────┘? ? │? ? │

│? ? │? ? ? ? ? ? ? ? 1px? ? ? ? ? ? ? ? ? │? ? │

│? ? └──────────────────────────────────────┘? ? │

│? ? ? ? ? ? ? ? ? ? ? 15px? ? ? ? ? ? ? ? ? ? ? │

└────────────────────────────────────────────────┘

width:200px+4px*2+1px*2=200px+8px+2px=210px;

height:40px+4px*2+1px*2=40px+8px+2px=50px;

margin-top:15px;

margin-left:10/360*100%;

padding-left:4/360*100%;

border:1px;

width:210/360*100%;

光標bug:

input

height:20px;

padding-top:4px;

padding-bottom:4px;

font-size:12px;

height = padding-top + font-size + padding-bottom;

此時光標在任意瀏覽器下高度與字體高度相同

┌────────────────────────────┐0

│? ? padding-top:4px;? ? ? │

│ 4 ┌────────────────────┐ 4 │4

│ p │? ? height:12px? ? │ p │

│ x └────────────────────┘ x │16

│? padding-bottom:4px;? ? ? │

└────────────────────────────┘20

其它細節(jié)重置:

letter-spacing: 0;

word-spacing: 0;

text-indent: 0;

text-shadow: none;

1.水平按百分比計算

2.垂直按像素計算

div

┌────────────────────────────┐0

│? ? padding-top:4px;? ? ? │

│ 4 ┌────────────┐┌──────┐ 4 │4

│ p │? ? div1? ? ││ div2 │ p │

│ x └────────────┘└──────┘ x │16

│? padding-bottom:4px;? ? ? │

└────────────────────────────┘20

0? 4? ? div1? ? 66 div2 96 100

div

{

? ? width:100%;

? ? height:20px;

? ? padding-left:4/100*100%;

? ? padding-right:4/100*100%;

? ? padding-top:4px;

? ? padding-bottom:4px;

}

div1{

? ? width:(66-44)/100*100%;

? ? height:20px;

}

div2

{

? ? width:(96-66)/100*100%;

? ? height:20px;

}

整體間距:10px,15px,20px

┌────────────────────────────┐0

│? ? padding-top:15px;? ? ? │

│10 ┌────────────┐┌──────┐10 │4

│ p │? ? div1? ? ││ div2 │ p │

│ x └────────────┘└──────┘ x │16

│? padding-bottom:15px;? ? │

└────────────────────────────┘20

整體內(nèi)容邊距

10px 2.7777%

字體padding

6px 1.6666%

10px 2.7777%

12px 3.3333%

15px 4.1666%

16px 4.4444%

20px 5.5555%

28px 7.7777%

30px 8.3333%

40px 1.1111%

60px 16.6666%

300px 83.3333%

320px 88.8888%

less下顏色命名:(web色)

@color-樣式名-顏色名:顏色值;

@color-background:#f5f5f5;

@color-border: #cccccc;

@color-font-blue:#0099cc;

@color-font-black:#1b1b1b;

@color-font-gray-light:#999999;

@color-font-gray:#999999;

@color-font-orange:#ff9900;

常用邊距:

//margin-組件名-位置

@margin-panel-top;

@margin-card-top;

@margin-list-top;

//組件名:panel,view,card,list

//方向,left,right,top,bottom

@padding-text-left;

//horizontal:水平

@padding-text-horizontal;

//垂直

@padding-text-vertical;

背景圖大小

340*200

小圖:386積分

70*30

標題高度:40px

小框:查看更多

80*25

圖片大小

132*132

340*200

1.樣式文件替劈,防止加載編碼出錯寄雀。

@charset "UTF-8";

/* 移動端定義字體的代碼 */

body{font-family:Helvetica;}

//豎屏時使用的樣式

@media all and (orientation:portrait) {

.css{}

}

//橫屏時使用的樣式

@media all and (orientation:landscape) {

.css{}

}

//禁止文本縮放,當僅采用豎屏時才會遇到字體分辨率重新調(diào)整的問題。

html {

  -webkit-text-size-adjust: 100%;

}

動畫效果中陨献,使用 translate 比使用定位性能高

//滾動中加入以下樣式盒犹。

-webkit-overflow-scrolling: touch;

overflow-scrolling: touch;

//更改輸入框placeholder的顏色

input::input-placeholder{color:#1b9dc7;}

input::-webkit-input-placeholder{color:#1b9dc7;}

input::-o-input-placeholder{color:#1b9dc7;}? ? ? 設置input里placeholder的字體顏色 屬性

input::-ms-input-placeholder{color:#1b9dc7;}

input::-moz-input-placeholder{color:#1b9dc7;}

//關(guān)閉iOS鍵盤首字母自動大寫

<input type="text" autocapitalize="off" />

//去掉數(shù)字輸入框的上下箭頭

input[type=number] {-moz-appearance:textfield; }

input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-outer-spin-button

{-webkit-appearance: none;? margin: 0; }

//android 上去掉語音輸入按鈕

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

//ios和android下觸摸元素時出現(xiàn)半透明灰色遮罩

E {

? ? -webkit-tap-highlight-color:rgba(255,255,255,0)

}

//消除transition閃屏

E {

? ? /*設置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn):保留 3D*/

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

? ? /*(設置進行轉(zhuǎn)換的元素的背面在面對用戶時是否可見:隱藏)*/

? ? -webkit-backface-visibility: hidden;

}

//啟用3D加速

E {

? ? -webkit-transform:translate3d(0, 0, 0)

? ? transform: translate3d(0, 0, 0);

}

//GPU加速

CSS3 transitions、CSS3 3D transforms眨业、Opacity急膀、Canvas、WebGL龄捡、Video來觸發(fā)GPU渲染

//長時間按住頁面出現(xiàn)閃退

E {

? ? -webkit-touch-callout: none;

}

//手機拍照和上傳圖片

<input type="file">的accept 屬性

<!-- 選擇照片 -->

<input type=file accept="image/*">

<!-- 選擇視頻 -->

<input type=file accept="video/*">

<input type="text"/>

輸入框:

-webkit-appearance:none;//iphone下去掉邊框陰影

-webkit-tap-highlight-color:transparent;//去掉高亮背景

-webkit-user-select: text;//顯示輸入的文字

一.文件命名規(guī)范

全局樣式:global.css脖阵;

框架布局/布局,版面:layout.css墅茉;

字體樣式:font.css命黔;

鏈接樣式:link.css;

打印樣式:print.css就斤;

主要的master.css

專欄columns.css

主題themes.css

……

二.常用類/ID命名規(guī)范

頁 眉:header

內(nèi) 容:content

容 器:container

頁 腳:footer

版 權(quán):copyright

導 航:menu

主導航:mainMenu / mainnav

子導航:subMenu / subnav

標 志:logo

標 語:banner

標 題:title

商 標:label

側(cè)邊欄:sidebar

圖 標:Icon

注 釋:note

搜 索:search

按 鈕:btn

登 錄:login

鏈 接:link

信息框:manage

外 套:wrap

頂導航:topnav

邊導航:sidebar

左導航:leftsidebar

右導航:rightsidebar

標 語\廣告:banner

菜單內(nèi)容1:menu1 content

菜單容量:menu container

子菜單: submenu

邊導航圖標:sidebarIcon

注釋:   note

面包屑:  breadcrumb(即頁面所處位置導航提示)

容器:   container

內(nèi)容:   content

搜索:   search

登陸:   Login

功能區(qū):  shop(如購物車悍募,收銀臺)

當前的   current

NameName

name_name

1440 1080 720 480 360 320

搭建html開發(fā)平臺(Visual Studio Code及相關(guān)插件安裝.)

手機端瀏覽器分辨率市場調(diào)研

搭建SVN及測試服務器

安裝less及指定使用方式。

UI基本尺寸確立

UI基本顏色及布局確定

動態(tài)效果設計

首頁模板

測圖軟件MarkMan的使用

基本框架搭建

手機端測試

制定開發(fā)標準洋机,以及自適應解決方案坠宴。

制定CSS樣式命名方式。

蘋果ID審請

域名購買及云服務器設計

帶領(lǐng)團隊绷旗,適應新的開發(fā)模式喜鼓。

測試頁面的檢查副砍,以及相關(guān)前端問題的解決。

常見問題

1庄岖、移動端如何定義字體font-family

三大手機系統(tǒng)的字體:

ios 系統(tǒng)

默認中文字體是Heiti SC

默認英文字體是Helvetica

默認數(shù)字字體是HelveticaNeue

無微軟雅黑字體

android 系統(tǒng)

默認中文字體是Droidsansfallback

默認英文和數(shù)字字體是Droid Sans

無微軟雅黑字體

winphone 系統(tǒng)

默認中文字體是Dengxian(方正等線體)

默認英文和數(shù)字字體是Segoe

無微軟雅黑字體

各個手機系統(tǒng)有自己的默認字體豁翎,且都不支持微軟雅黑

如無特殊需求,手機端無需定義中文字體隅忿,使用系統(tǒng)默認

英文字體和數(shù)字字體可使用 Helvetica 心剥,三種系統(tǒng)都支持

1、 移動端定義字體的代碼 */

body{font-family:Helvetica;}

2背桐、winphone系統(tǒng)a优烧、input標簽被點擊時產(chǎn)生的半透明灰色背景怎么去掉

<meta? name="msapplication-tap-highlight"? content="no">

3、webkit表單元素的默認外觀怎么重置

.css{-webkit-appearance:none;}

4链峭、webkit表單輸入框placeholder的顏色值能改變么

input::-webkit-input-placeholder{color:#AAAAAA;}

input:focus::-webkit-input-placeholder{color:#EEEEEE;}

5畦娄、webkit表單輸入框placeholder的文字能換行么

ios可以,android不行~

6. 關(guān)閉iOS鍵盤首字母自動大寫

在iOS中弊仪,默認情況下鍵盤是開啟首字母大寫的功能的熙卡,如果啟用這個功能,可以這樣:

<input type="text" autocapitalize="off" />

7. 關(guān)閉iOS輸入自動修正

和英文輸入默認自動首字母大寫那樣撼短,IOS還做了一個功能再膳,默認輸入法會開啟自動修正輸入內(nèi)容,這樣的話曲横,用戶經(jīng)常要操作兩次喂柒。如果不希望開啟此功能,我們可以通過input標簽屬性來關(guān)閉掉:

<input type="text" autocorrect="off" />

8. 禁止文本縮放

當移動設備橫豎屏切換時禾嫉,文本的大小會重新計算灾杰,進行相應的縮放,當我們不需要這種情況時熙参,可以選擇禁止:

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

需要注意的是艳吠,PC端的該屬性已經(jīng)被移除,該屬性在移動端要生效孽椰,必須設置 `meta viewport’昭娩。

9. 移動端如何清除輸入框內(nèi)陰影

在iOS上,輸入框默認有內(nèi)部陰影黍匾,但無法使用 box-shadow 來清除栏渺,如果不需要陰影,可以這樣關(guān)閉:

input,

textarea {

  border: 0; /* 方法1 */

  -webkit-appearance: none; /* 方法2 */}

10. 快速回彈滾動

我們先來看看回彈滾動在手機瀏覽器發(fā)展的歷史:

早期的時候锐涯,移動端的瀏覽器都不支持非body元素的滾動條磕诊,所以一般都借助 iScroll;

Android 3.0/iOS解決了非body元素的滾動問題,但滾動條不可見,同時iOS上只能通過2個手指進行滾動霎终;

Android 4.0解決了滾動條不可見及增加了快速回彈滾動效果滞磺,不過隨后這個特性又被移除;

iOS從5.0開始解決了滾動條不可見及增加了快速回彈滾動效果

在iOS上如果你想讓一個元素擁有像 Native 的滾動效果莱褒,你可以這樣做:

? ? .xxx {

? ? ? ? overflow: auto; /* auto | scroll */

? ? ? ? -webkit-overflow-scrolling: touch;

? ? ? }

PS:iScroll用過之后感覺不是很好击困,有一些詭異的bug,這里推薦另外一個 iDangero Swiper保礼,這個插件集成了滑屏滾動的強大功能(支持3D)沛励,而且還有回彈滾動的內(nèi)置滾動條责语,官方地址:

iDangero

11.禁止復制該文本? 如果用戶可以選擇,則給用戶以網(wǎng)頁的感覺,App高大上的感覺就出不來了

test{

? -moz-user-select: none; /*火狐*/

? -webkit-user-select: none;? /*webkit瀏覽器*/

? -ms-user-select: none;? /*IE10*/

? -khtml-user-select: none; /*早期瀏覽器*/

? user-select: none;}


12. 移動端取消touch高亮效果

在做移動端頁面時炮障,會發(fā)現(xiàn)所有a標簽在觸發(fā)點擊時或者所有設置了偽類 :active 的元素,默認都會在激活狀態(tài)時坤候,顯示高亮框胁赢,如果不想要這個高亮,那么你可以通過css以下方法來進行全局的禁止:

html {

? ? -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

但這個方法在三星的機子上無效白筹,有一種妥協(xié)的方法是把頁面非真實跳轉(zhuǎn)鏈接的a標簽換成其它標簽智末,可以解決這個問題。

13. 如何禁止保存或拷貝圖像(IOS)

通常當你在手機或者pad上長按圖像 img 徒河,會彈出選項 存儲圖像 或者 拷貝圖像系馆,如果你不想讓用戶這么操作,那么你可以通過以下方法來禁止:

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

14顽照、假如手機網(wǎng)站不用兼容IE瀏覽器由蘑,一般我們會使用zeptojs。

zeptojs內(nèi)置Touch events方法代兵,具體可以看http://zeptojs.com/#Touch events

看了一下zeptio新版的API尼酿,已經(jīng)支持IE10以上瀏覽器,對zeptojs可以選擇使用植影!

15裳擎、防止手機中網(wǎng)頁放大和縮小。

? <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

? 當然思币,user-scalable=0,有的人也寫成user-scalable=no鹿响,都可以的。

16谷饿、apple-mobile-web-app-capable

apple-mobile-web-app-capable是設置Web應用是否以全屏模式運行惶我。

如果content設置為yes,Web應用會以全屏模式運行各墨,反之指孤,則不會。content的默認值是no,表示正常顯示恃轩。你可以通過只讀屬性window.navigator.standalone來確定網(wǎng)頁是否以全屏模式顯示结洼。

17、format-detection

format-detection 啟動或禁用自動識別頁面中的電話號碼叉跛。

語法:

說明:

默認情況下松忍,設備會自動識別任何可能是電話號碼的字符串。設置telephone=no可以禁用這項功能筷厘。

18鸣峭、Html5調(diào)用安卓或者iOS的撥號功能

? ? ? ? <a href="tel:13638657008">13638657008</a>

? ? ? ? <a href="sms:139xxxxxxx">一鍵發(fā)送短信</a>

19、html5GPS定位功能

具體請看:http://www.w3school.com.cn/html5/html_5_geolocation.asp

20酥艳、上下拉動滾動條時卡頓摊溶、慢? Android3+和iOS5+支持CSS3的新屬性為overflow-scrolling

body {

? ? ? ? -webkit-overflow-scrolling: touch;

? ? ? ? overflow-scrolling: touch;

? ? }

21、長時間按住頁面出現(xiàn)閃退

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

22充石、iphone及ipad下輸入框默認內(nèi)陰影

Element{

? -webkit-appearance: none;

}

23莫换、ios和android下觸摸元素時出現(xiàn)半透明灰色遮罩

Element { -webkit-tap-highlight-color:rgba(255,255,255,0)}

24、active兼容處理 即 偽類 :active 失效

方法一:body添加ontouchstart

方法二:js給 document 綁定 touchstart 或 touchend 事件

a {color: #000;}

a:active {color: #fff;}

bar

document.addEventListener('touchstart',function(){},false);

25骤铃、動畫定義3D啟用硬件加速

Element {

-webkit-transform:translate3d(0, 0, 0)

transform: translate3d(0, 0, 0);

}

26拉岁、Retina屏的1px邊框

Element{

? border-width: thin;

}

27、webkit mask 兼容處理

某些低端手機不支持CSS3 mask惰爬,可以選擇性的降級處理喊暖。

比如可以使用js判斷來引用不同class:

if( ‘WebkitMask’ in document.documentElement.style){

alert(‘支持mask’);

} else {

alert(‘不支持mask’);

}

27、瀏覽器私有及其它meta

以下屬性在項目中沒有應用過撕瞧,可以寫一個demo測試以下陵叽!

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">

其它

針對手持設備優(yōu)化,主要是針對一些老的不識別viewport的瀏覽器风范,比如黑莓

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

微軟的老式瀏覽器

<meta name="MobileOptimized" content="320">

windows phone 點擊無高光

<meta name="msapplication-tap-highlight" content="no">

29咨跌、旋轉(zhuǎn)屏幕時,字體大小調(diào)整的問題

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {

-webkit-text-size-adjust:100%;

}

30硼婿、transition閃屏

/設置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn):保留3D /

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

/ 設置進行轉(zhuǎn)換的元素的背面在面對用戶時是否可見:隱藏 /

-webkit-backface-visibility:hidden;

31锌半、圓角bug? 某些Android手機圓角失效

background-clip: padding-box;

32、頂部狀態(tài)欄背景色

說明:

除非你先使用apple-mobile-web-app-capable指定全屏模式寇漫,否則這個meta標簽不會起任何作用刊殉。

如果content設置為default,則狀態(tài)欄正常顯示州胳。如果設置為blank记焊,則狀態(tài)欄會有一個黑色的背景。如果設置為blank-translucent栓撞,則狀態(tài)欄顯示為黑色半透明遍膜。

如果設置為default或blank碗硬,則頁面顯示在狀態(tài)欄的下方,即狀態(tài)欄占據(jù)上方部分瓢颅,頁面占據(jù)下方部分恩尾,二者沒有遮擋對方或被遮擋。

如果設置為blank-translucent挽懦,則頁面會充滿屏幕翰意,其中頁面頂部會被狀態(tài)欄遮蓋住(會覆蓋頁面20px高度信柿,而iphone4和itouch4的Retina屏幕為40px)冀偶。

默認值是default。

33渔嚷、ios 設置input 按鈕樣式會被默認樣式覆蓋

解決方式如下:

input,

textarea {

? border: 0;

? -webkit-appearance: none;

}

34.安卓里有一像素白邊問題

圖片描述

像這個結(jié)構(gòu)可以用dl dd dt 結(jié)構(gòu)寫进鸠,dl的width可以有兩種設置的方法:

(1)width:100%;(2)width:94%圃伶;pading:3%堤如;

以上兩種設置寬度的方式都可以蒲列,但是第二種會出現(xiàn)1像素白邊的問題窒朋,所以建議用第一種,

邊距在dd蝗岖,dt里設置這個問題只有在安卓里才出現(xiàn)的侥猩,用谷歌里的模擬器測不出來,只有用手機才能看出來抵赢,

我用三星小米的手機都測出有這個問題

35.手機端去掉點擊時默認的邊框

*:focus {outline: none;}

* { -webkit-tap-highlight-color: trans

36欺劳、蘋果手機的一些設置。

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

如果content設置為yes铅鲤,Web應用會以全屏模式運行划提,反之,則不會邢享。content的默認值是no鹏往,表示正常顯示。

你可以通過只讀屬性window.navigator.standalone來確定網(wǎng)頁是否以全屏模式顯示骇塘。

37伊履、format-detection設置。

<meta name="format-detection" content="telephone=no">

<meta name="format-detection" content="email=no">

format-detection 啟動或禁用自動識別頁面中的電話號碼款违、郵箱地址唐瀑。

38、ios和android下觸摸元素時出現(xiàn)半透明灰色遮罩

Element {

? ? -webkit-tap-highlight-color:rgba(255,255,255,0)

}

39插爹、動畫定義3D啟用硬件加速

Element {

? ? -webkit-transform:translate3d(0, 0, 0)

? ? transform: translate3d(0, 0, 0);

}

注意:3D變形會消耗更多的內(nèi)存與功耗

40哄辣、旋轉(zhuǎn)屏幕時请梢,字體大小調(diào)整的問題

*{

? -webkit-text-size-adjust:100%;?

}

41、IOS中input鍵盤事件keyup力穗、keydown溢陪、keypress支持不是很好

問題是這樣的,用input search做模糊搜索的時候睛廊,在鍵盤里面輸入關(guān)鍵詞形真,會通過ajax后臺查詢,然后返回數(shù)據(jù)超全,然后再對返回的數(shù)據(jù)進行關(guān)鍵詞標紅咆霜。用input監(jiān)聽鍵盤keyup事件,在安卓手機瀏覽器中是可以的嘶朱,但是在ios手機瀏覽器中變紅很慢蛾坯,用輸入法輸入之后,并未立刻相應keyup事件疏遏,只有在通過刪除之后才能相應脉课!

解決方法:可以用html5的oninput事件去代替keyup

<input type="text" id="testInput">

<script type="text/javascript">

? ? document.getElementById(‘testInput‘).addEventListener(‘input‘, function(e){

? ? ? ? var value = e.target.value;

? ? });

</script>

42、圖片無法正常加載時 用默認圖片替代的功能

<img src="img/1.jpg"? onerror = "javascript:this.src= 'img/default.png';" >?

43财异、 禁止鼠標右鍵

? <img? src="img/1.jpg"? oncontextmenu = "return false" >

44. audio元素和video元素在ios和andriod中無法自動播放

$('html').one('touchstart',function(){

? ? ? audio.play()

? })

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末倘零,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子戳寸,更是在濱河造成了極大的恐慌呈驶,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,919評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件疫鹊,死亡現(xiàn)場離奇詭異袖瞻,居然都是意外死亡,警方通過查閱死者的電腦和手機拆吆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評論 3 392
  • 文/潘曉璐 我一進店門聋迎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人枣耀,你說我怎么就攤上這事霉晕。” “怎么了奕枢?”我有些...
    開封第一講書人閱讀 163,316評論 0 353
  • 文/不壞的土叔 我叫張陵娄昆,是天一觀的道長。 經(jīng)常有香客問我缝彬,道長萌焰,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,294評論 1 292
  • 正文 為了忘掉前任谷浅,我火速辦了婚禮扒俯,結(jié)果婚禮上奶卓,老公的妹妹穿的比我還像新娘。我一直安慰自己撼玄,他們只是感情好夺姑,可當我...
    茶點故事閱讀 67,318評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著掌猛,像睡著了一般盏浙。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上荔茬,一...
    開封第一講書人閱讀 51,245評論 1 299
  • 那天废膘,我揣著相機與錄音,去河邊找鬼慕蔚。 笑死丐黄,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的孔飒。 我是一名探鬼主播灌闺,決...
    沈念sama閱讀 40,120評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼坏瞄!你這毒婦竟也來了桂对?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,964評論 0 275
  • 序言:老撾萬榮一對情侶失蹤惦积,失蹤者是張志新(化名)和其女友劉穎接校,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體狮崩,經(jīng)...
    沈念sama閱讀 45,376評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,592評論 2 333
  • 正文 我和宋清朗相戀三年鹿寻,在試婚紗的時候發(fā)現(xiàn)自己被綠了睦柴。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,764評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡毡熏,死狀恐怖坦敌,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情痢法,我是刑警寧澤狱窘,帶...
    沈念sama閱讀 35,460評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站财搁,受9級特大地震影響蘸炸,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜尖奔,卻給世界環(huán)境...
    茶點故事閱讀 41,070評論 3 327
  • 文/蒙蒙 一搭儒、第九天 我趴在偏房一處隱蔽的房頂上張望穷当。 院中可真熱鬧,春花似錦淹禾、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽门岔。三九已至,卻和暖如春毁习,著一層夾襖步出監(jiān)牢的瞬間铲咨,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評論 1 269
  • 我被黑心中介騙來泰國打工蜓洪, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留纤勒,地道東北人。 一個月前我還...
    沈念sama閱讀 47,819評論 2 370
  • 正文 我出身青樓隆檀,卻偏偏與公主長得像摇天,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子恐仑,可洞房花燭夜當晚...
    茶點故事閱讀 44,665評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 1泉坐、垂直對齊 如果你用CSS,則你會有困惑:我該怎么垂直對齊容器中的元素裳仆?現(xiàn)在腕让,利用CSS3的Transform,...
    kiddings閱讀 3,164評論 0 11
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5歧斟? 答:HTML5是最新的HTML標準纯丸。 注意:講述HT...
    kismetajun閱讀 27,476評論 1 45
  • 這篇文字里我會介紹50 個便于使用的 CSS2/CSS3 代碼片段給所有的WEB專業(yè)人員. 選擇IDE開發(fā)環(huán)境來存...
    JamHsiao_aaa4閱讀 1,114評論 0 3
  • 國慶第四天10.04看了電影《羞羞的鐵拳》,在看之前静袖,因為看多了喜劇電影觉鼻,我對它的期待值其實沒有很高。 首先是劇情...
    午間西瓜閱讀 224評論 0 0
  • 今天抽空檢查了一下孩子暑假作業(yè)队橙,感覺總體進度是可以的坠陈。 英語“一起做作業(yè)網(wǎng)”每天一直在做,成績也不...
    鑫姐和嬌丫頭閱讀 105評論 0 0