開發(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()
? })