如果你是一名前端er,又想在移動設備上開發出自己的應用,那怎麼實現呢?幸好,webkit內核的瀏覽器能幫助我們完成這一切。接觸 webkit webApp的開發已經有一段時間了,現把一些技巧分享給大家 :
1. viewport:
也就是可視區域。對於桌面瀏覽器,我們都很清楚viewport是什麼,就是出去了所有工具欄、狀態欄、滾動條等等之後用於看網頁的區域,
這是真正有效的區域。由於移動設備屏幕寬度不同於傳統web,因此我們需要改變viewport;
實際上我們可以操作的屬性有4 個:
width -
// viewport 的寬度 (範圍從200 到10,000,默認爲980 像素) height -
// viewport 的高度 (範圍從223 到10,000) initial-scale -
// 初始的縮放比例 (範圍從>0 到10) minimum-scale -
// 允許用戶縮放到的最小比例 maximum-scale -
// 允許用戶縮放到的最大比例 user-scalable -
// 用戶是否可以手動縮 (no,yes) |
那麼到底這些設置如何讓Safari 知道?其實很簡單,就一個meta,形如:
<meta http-equiv= "Content-Type"
content= "text/html; charset=utf-8" >
//編碼 <meta id= "viewport"
name= "viewport"
content= "width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;" /> <meta name=”apple-mobile-web-app-capable” content=”yes” />
// 離線應用的另一個技巧 <meta name=”apple-mobile-web-app-status-bar-style” content=black” />
// 隱藏狀態欄 <meta content= "black"
name= "apple-mobile-web-app-status-bar-style"
/> //指定的iphone中safari頂端的狀態條的樣式
<meta content= "telephone=no"
name= "format-detection"
/> //告訴設備忽略將頁面中的數字識別爲電話號碼
<meta name= "Author"
contect= "Mr.He" / >
|
在設置了initial-scale=1 之後,我們終於可以以1:1 的比例進行頁面設計了。關於viewport,還有一個很重要的概念是:iphone 的safari 瀏覽器完全沒有滾動條,而且不是簡單的“隱藏滾動條”,是根本沒有這個功能。iphone 的safari 瀏覽器實際上從一開始就完整顯示了這個網頁,然後用viewport 查看其中的一部分。當你用手指拖動時,其實拖的不是頁面,而是viewport。瀏覽器行爲的改變不止是滾動條,交互事件也跟普通桌面不一樣。(請參考:指尖的下JS 系列文章)
2. link:
<link rel=”apple-touch-startup-image” href=”startup.png” />
// 設置開始頁面圖片 <link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/>
// 在設置書籤的時候可以顯示好看的圖標 <link rel= "stylesheet"
media= "all and (orientation:portrait)"
href= "portrait.css" >
// 肖像模式樣式 <link rel= "stylesheet"
media= "all and (orientation:landscape)"
href= "landscape.css"
// 風景模式樣式 //豎屏時使用的樣式
<style media= "all and (orientation:portrait)"
type= "text/css" > #landscape { display: none; } </style> //橫屏時使用的樣式
<style media= "all and (orientation:landscape)"
type= "text/css" > #portrait { display: none; } </style>
|
3. 事件 : (請參考:指尖的下JS 系列文章)
// 手勢事件 touchstart
//當手指接觸屏幕時觸發 touchmove
//當已經接觸屏幕的手指開始移動後觸發 touchend
//當手指離開屏幕時觸發 touchcancel // 觸摸事件 gesturestart
//當兩個手指接觸屏幕時觸發 gesturechange
//當兩個手指接觸屏幕後開始移動時觸發 gestureend // 屏幕旋轉事件
onorientationchange
// 檢測觸摸屏幕的手指何時改變方向
orientationchange
// touch事件支持的相關屬性 touches
targetTouches
changedTouches
clientX // X coordinate of touch relative to the viewport (excludes scroll offset)
clientY // Y coordinate of touch relative to the viewport (excludes scroll offset)
screenX
// Relative to the screen
screenY
// Relative to the screen pageX // Relative to the full page (includes scrolling)
pageY
// Relative to the full page (includes scrolling)
target
// Node the touch event originated from
identifier
// An identifying number, unique to each touch event |
4. 屏幕旋轉事件:onorientationchange
添加屏幕旋轉事件偵聽,可隨時發現屏幕旋轉狀態(左旋、右旋還是沒旋)。例子:
// 判斷屏幕是否旋轉 function
orientationChange() { switch (window.orientation) {
case
0: alert( "肖像模式 0,screen-width: "
+ screen.width + "; screen-height:"
+ screen.height); break ;
case
-90: alert( "左旋 -90,screen-width: "
+ screen.width + "; screen-height:"
+ screen.height); break ;
case
90: alert( "右旋 90,screen-width: "
+ screen.width + "; screen-height:"
+ screen.height); break ;
case
180: alert( "風景模式 180,screen-width: "
+ screen.width + "; screen-height:"
+ screen.height); break ;
};<br>}; // 添加事件監聽
addEventListener( 'load' ,
function (){
orientationChange();
window.onorientationchange = orientationChange;
}); |
5. 隱藏地址欄 & 處理事件的時候,防止滾動條出現:
// 隱藏地址欄 & 處理事件的時候 ,防止滾動條出現 addEventListener( 'load' ,
function (){
setTimeout( function (){ window.scrollTo(0, 1); }, 100);
}); |
6. 雙手指滑動事件:
// 雙手指滑動事件 addEventListener( 'load' , function (){
window.onmousewheel = twoFingerScroll;}, false
// 兼容各瀏覽器,表示在冒泡階段調用事件處理程序 (true 捕獲階段) ); function
twoFingerScroll(ev) { var
delta =ev.wheelDelta/120; //對 delta 值進行判斷(比如正負) ,而後執行相應操作
return
true ;
}; |
7. 判斷是否爲iPhone:
// 判斷是否爲 iPhone :
function
isAppleMobile() { return
(navigator.platform.indexOf( 'iPad' ) != -1);
}; |
8. localStorage:
例子 :(注意數據名稱 n 要用引號引起來)
var
v = localStorage.getItem( 'n' ) ? localStorage.getItem( 'n' ) :
"" ;
// 如果名稱是 n 的數據存在 ,則將其讀出 ,賦予變量 v 。
localStorage.setItem( 'n' , v);
// 寫入名稱爲 n、值爲 v 的數據 localStorage.removeItem( 'n' );
// 刪除名稱爲 n 的數據 |
9. 使用特殊鏈接:
如果你關閉自動識別後 ,又希望某些電話號碼能夠鏈接到 iPhone 的撥號功能 ,那麼可以通過這樣來聲明電話鏈接 ,
< a
href = "tel:12345654321" >打電話給我</ a > < a
href = "sms:12345654321" >發短信</ a > 或用於單元格: < td
onclick = "location.href='tel:122'" > |
10. 自動大寫與自動修正
要關閉這兩項功能,可以通過autocapitalize 與autocorrect 這兩個選項:
< input
type = "text"
autocapitalize = "off"
autocorrect = "off"
/> |
11. WebKit CSS:
①“盒模型”的具體描述性質的包圍盒塊內容,包括邊界,填充等等。
-webkit-border-bottom-left-radius: radius; -webkit-border-top-left-radius: horizontal_radius vertical_radius; -webkit-border-radius: radius; //容器圓角 -webkit-box-sizing: sizing_model; 邊框常量值:border-box/content-box -webkit-box-shadow: hoff voff blur color; //容器陰影(參數分別爲:水平X 方向偏移量;垂直Y 方向偏移量;高斯模糊半徑值;陰影顏色值) -webkit-margin-bottom-collapse: collapse_behavior; 常量值:collapse/discard/separate -webkit-margin-start: width; -webkit-padding-start: width; -webkit-border-image: url(borderimg.gif) 25 25 25 25 round/stretch round/stretch; -webkit-appearance: push-button; //內置的CSS 表現,暫時只支持push-button |
②“視覺格式化模型”描述性質,確定了位置和大小的塊元素。
direction: rtl unicode-bidi: bidi-override; 常量:bidi-override/embed/normal |
③“視覺效果”描述屬性,調整的視覺效果塊內容,包括溢出行爲,調整行爲,能見度,動畫,變換,和過渡。
clip: rect(10px, 5px, 10px, 5px) resize: auto; 常量:auto/both/horizontal/none/vertical visibility: visible; 常量: collapse/hidden/visible -webkit-transition: opacity 1s linear; 動畫效果 ease/linear/ease-in/ease-out/ease-in-out -webkit-backface-visibility: visibler; 常量:visible(默認值)/hidden -webkit-box-reflect: right 1px; 鏡向反轉 -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));; //CSS 遮罩/蒙板效果 -webkit-mask-attachment: fixed; 常量:fixed/scroll -webkit-perspective: value; 常量:none(默認) -webkit-perspective-origin: left top; -webkit-transform: rotate(5deg); -webkit-transform-style: preserve-3d; 常量:flat/preserve-3d; (2D 與3D) |
④“生成的內容,自動編號,並列出”描述屬性,允許您更改內容的一個組成部分,創建自動編號的章節和標題,和操縱的風格清單的內容。
content: “Item” counter(section) ” “; This resets the counter. First section >two section three section counter-increment: section 1; counter-reset: section; |
⑤“分頁媒體”描述性能與外觀的屬性,控制印刷版本的網頁,如分頁符的行爲。
page-break-after: auto; 常量:always/auto/avoid/left/right page-break-before: auto; 常量:always/auto/avoid/left/right page-break-inside: auto; 常量:auto/avoid |
⑥“顏色和背景”描述屬性控制背景下的塊級元素和顏色的文本內容的組成部分。
-webkit-background-clip: content; 常量:border/content/padding/text -webkit-background-origin: padding; 常量:border/content/padding/text -webkit-background-size: 55px; 常量:length/length_x/length_y |
⑦ “字型”的具體描述性質的文字字體的選擇範圍內的一個因素。報告還描述屬性用於下載字體定義。
unicode-range: U+00-FF, U+980-9FF; |
⑧“文本”描述屬性的特定文字樣式,間距和自動滾屏。
text-shadow: #00FFFC 10px 10px 5px; text-transform: capitalize; 常量:capitalize/lowercase/none/uppercase word-wrap: break-word; 常量:break-word/normal -webkit-marquee: right large infinite normal 10s; 常量:direction(方向) increment(迭代次數) repetition(重複) style(樣式) speed(速度); -webkit-marquee-direction: ahead/auto/backwards/down/forwards/left/reverse/right/up -webkit-marquee-incrementt: 1-n/infinite(無窮次) -webkit-marquee-speed: fast/normal/slow -webkit-marquee-style: alternate/none/scroll/slide -webkit-text-fill-color: #ff6600; 常量:capitalize, lowercase, none, uppercase -webkit-text-security: circle; 常量:circle/disc/none/square -webkit-text-size-adjust: none; 常量:auto/none; -webkit-text-stroke: 15px #fff; -webkit-line-break: after-white-space; 常量:normal/after-white-space -webkit-appearance: caps-lock-indicator; -webkit-nbsp-mode: space; 常量: normal/space -webkit-rtl-ordering: logical; 常量:visual/logical -webkit-user-drag: element; 常量:element/auto/none -webkit-user-modify: read- only; 常量:read-write-plaintext-only/read-write/read-only -webkit-user-select: text; 常量:text/auto/none |
⑨“表格”描述的佈局和設計性能表的具體內容。
-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; -webkit-column-break-after: right; 常量:always/auto/avoid/left/right -webkit-column-break-before: right; 常量:always/auto/avoid/left/right –webkit-column-break-inside: logical; 常量:avoid/auto -webkit-column-count: 3; //分欄 -webkit-column-rule: 1px solid #fff; style:dashed,dotted,double,groove,hidden,inset,none,outset,ridge,solid |
⑩“用戶界面”描述屬性,涉及到用戶界面元素在瀏覽器中,如滾動文字區,滾動條,等等。報告還描述屬性,範圍以外的網頁內容,如光標的標註樣式和顯示當您按住觸摸觸摸
目標,如在iPhone上的鏈接。
-webkit-box-align:
baseline , center ,end,start,stretch 常量: baseline / center /end/start/stretch -webkit-box- direction :
normal ;常量: normal /reverse -webkit-box-flex: flex_valuet -webkit-box-flex-group: group_number -webkit-box-lines: multiple; 常量:multiple/single -webkit-box-ordinal-group: group_number -webkit-box-orient: block-axis; 常量:block-axis/horizontal/inline-axis/vertical/orientation –webkit-box-pack: alignment; 常量: center /end/ justify /start |
12. 動畫過渡
這是 Webkit 中最具創新力的特性:使用過渡函數定義動畫。
-webkit-animation: title infinite ease-in-out
3 s; animation 有這幾個屬性: -webkit-animation-name: //屬性名,就是我們定義的keyframes -webkit-animation-duration: 3 s //持續時間 -webkit-animation-timing-function: //過渡類型:ease/ linear(線性) /ease-in(慢到快)/ease-out(快到慢) /ease-in-out(慢到快再到慢) /cubic-bezier -webkit-animation-delay: 10 ms //動畫延遲(默認 0 ) -webkit-animation-iteration-count: //循環次數(默認 1 ),infinite 爲無限 -webkit-animation-direction: //動畫方式: normal (默認 正向播放); alternate(交替方向,第偶數次正向播放,第奇數次反向播放) |
這些同樣是可以簡寫的。但真正讓我覺的很爽的是keyframes,它能定義一個動畫的轉變過程供調用,過程爲0%到100%或from(0%)到to(100%)。簡單點說,只要你有想法,你想讓元素在這個過程中以什麼樣的方式改變都是很簡單的。
-webkit-transform: 類型(縮放scale/旋轉rotate/傾斜skew/位移translate) scale(num,num) 放大倍率。scaleX 和 scaleY( 3 ),可以簡寫爲:scale(* , *) rotate(*deg) 轉動角度。rotateX 和 rotateY,可以簡寫爲:rotate(* , *) Skew(*deg) 傾斜角度。skewX 和skewY,可簡寫爲:skew(* , *) translate(*,*) 座標移動。translateX 和translateY,可簡寫爲:translate(* , *)。 |
實現模擬彈出消息框(Alert)的例子:
①定義過渡(在<style type="text/css">段中描述keyframes):
@-webkit-keyframes DivZoom { 0%
{ -webkit-transform: scale( 0.01 ) } 60%
{ -webkit-transform: scale( 1.05 ) } 80%
{ -webkit-transform: scale( 0.95 ) } 100%
{ -webkit-transform: scale( 1.00 ) } } .sZoom { -webkit-animation: DivZoom
0.5 s ease-in-out } |
(很容易看懂,將元素從縮小的0.01 倍--很小但不能爲0 倍,放大到1.05 倍,再縮小到0.95倍,最後到1 倍即正常大小。整個過渡過程事件爲0.5 秒,動畫方式爲ease-in-out,即慢到快再到慢,默認只進行1 次過渡。這正是大家經常看到的 iPhone 彈出的提示信息的動畫效果!)
②定義元素(在<body>段中):
< div
id = "layerH"
line number2 index1 alt1" > z-index: 1; visibility: hidden; ">
|
③啓動動畫(在 javascript 定義的函數中)
function
pHelp() { layerH.style.visibility =
'visible' layerH.style.cssText =
"-webkit-animation-delay: "
+ Math.random() + "ms" layerH.className =
'sZoom' } |
(這個啓動函數就很好理解了。但是爲什麼要使用-webkit-animation-delay 這句呢?因爲當一個元素過渡顯示完成後,若其樣式沒有變化,下一次將無法進行過渡動畫顯示。我們巧妙的利用其動畫延遲時間定義,使其有所變化,就避免了上述問題。其中使用隨機數函數Math.random(),產生一個大於0 小於1 的隨機數。當然,延遲零點幾毫秒,用戶是不會察覺的。)
補充:
1. 鎖定 viewport
ontouchmove= "event.preventDefault()"
//鎖定viewport,任何屏幕操作不移動用戶界面(彈出鍵盤除外)。 |
2. 被點擊元素的外觀變化,可以使用樣式來設定:
-webkit-tap-highlight-color: 顏色 |
3. 偵測iPhone/iPod
開發特定設備的移動網站,首先要做的就是設備偵測了。下面是使用Javascript偵測iPhone/iPod的UA,然後轉向到專屬的URL。
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { if
(document.cookie.indexOf( "iphone_redirect=false" ) == -1) { } } |
雖然Javascript是可以在水果設備上運行的,但是用戶還是可以禁用。它也會造成客戶端刷新和額外的數據傳輸,所以下面是服務器端偵測和轉向:
if (strstr($_SERVER[ 'HTTP_USER_AGENT' ], 'iPhone' )
|| strstr($_SERVER[ 'HTTP_USER_AGENT' ], 'iPod' )) { exit(); } |
4. 阻止旋轉屏幕時自動調整字體大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;} |
5. iPhone才識別的CSS
如果不想設備偵測,可以用CSS媒體查詢來專爲iPhone/iPod定義樣式。
@media screen and (max-device-width: 480px) {} |
6. 縮小圖片
網站的大圖通常寬度都超過480像素,如果用前面的代碼限制了縮放,這些圖片在iPhone版顯示顯然會超過屏幕。好在iPhone機能還夠,我們可以用CSS讓iPhone自動將大圖片縮小顯示。
@media screen
and (max-device- width :
480px ){ img{ max-width : 100% ; height : auto ;} } |
7. 模擬:hover僞類
因爲iPhone並沒有鼠標指針,所以沒有hover事件。那麼CSS :hover僞類就沒用了。但是iPhone有Touch事件,onTouchStart 類似 onMouseOver,onTouchEnd 類似 onMouseOut。所以我們可以用它來模擬hover。使用Javascript:
var
myLinks = document.getElementsByTagName( 'a' ); for ( var
i = 0; i < myLinks.length; i++){ myLinks[i].addEventListener(’touchstart’,
function (){ this .className = “hover”;},
false ); myLinks[i].addEventListener(’touchend’,
function (){ this .className = “”;},
false ); } |
然後用CSS增加hover效果:
a:hover, a.hover {
/* 你的hover效果 */ } |
這樣設計一個鏈接,感覺可以更像按鈕。並且,這個模擬可以用在任何元素上。