手機網站的幾點注意
對於手機網站建設,總結了如下幾點注意:
1、 安卓瀏覽器看背景圖片,有些裝置會模糊。
用同等比例的圖片在PC機上很清楚,但是手機上很模糊,原因是什麼呢?
經過研究,是devicePixelRatio作怪,因為手機解析度太小,如果按照解析度來顯示網頁,這樣字會非常小,所以蘋果當初就把iPhone 4的960640解析度,在網頁裡只顯示了480320,這樣devicePixelRatio=2。現在android比較亂,有1.5的,有2的也有3的。
想讓圖片在手機裡顯示更為清晰,必須使用2x的背景圖來代替img標籤(一般情況都是用2倍)。例如一個div的寬高是100100,背景圖必須得200200,然後background-size:contain;,這樣顯示出來的圖片就比較清晰了。
程式碼可以如下:
background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;display:inline-block; width:100%; height:50px;
或者指定 background-size:contain;都可以,大家試試!
2、圖片載入
若您遇到圖片載入很慢的問題,對這種情況,手機開發一般用canvas方法載入:
具體的canvas API 參見:http://javascript.ruanyifeng.com/htmlapi/canvas.html
下面舉例說明一個canvas的例子:
<li><canvas></canvas></li>
s動態載入圖片和li 總共舉例17張圖片!
var total=17;
var zWin=$(window);
var render=function(){
var padding=2;
var winWidth=zWin.width();
var picWidth=Math.floor((winWidth-padding*3)/4);
var tmpl ='';
for (var i=1;i<=totla;i++){
var p=padding;
var imgSrc='img/'+i+'.jpg';
if(i%4==1){
p=0;
}
tmpl +='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>';
var imageObj = new Image();
imageObj.index = i;
imageObj.onload = function(){
var cvs =$('#cvs_'+this.index)[0].getContext('2d');
cvs.width = this.width;
cvs.height=this.height;
cvs.drawImage(this,0,0);
}
imageObj.src=imgSrc;
}
}
render();
3、假如手機網站不用相容IE瀏覽器,一般我們會使用zeptojs。zeptojs內建Touch events方法,具體可以看http://zeptojs.com/#Touch events
看了一下zeptio新版的API,已經支援IE10以上瀏覽器,對zeptojs可以選擇使用!
4、防止手機中網頁放大和縮小,這點是最基本的,最為手機網站開發者來說應該都知道的,就是設定meta中的viewport
還有就是,有些手機網站我們看到如下宣告:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
設定了DTD的方式是XHTML的寫法,假如我們頁面運用的是html5,可以不用設定DTD,直接宣告<!DOCTYPE html>。
使用viewport使頁面禁止縮放。 通常把user-scalable設定為0來關閉使用者對頁面檢視縮放的行為。
<meta name="viewport" content="user-scalable=0" />
但是為了更好的相容,我們會使用完整的viewport設定。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
當然,user-scalable=0,有的人也寫成user-scalable=no,都可以的。
5、apple-mobile-web-app-capable
apple-mobile-web-app-capable是設定Web應用是否以全屏模式執行。
語法:
<meta name="apple-mobile-web-app-capable" content="yes">
說明:
如果content設定為yes,Web應用會以全屏模式執行,反之,則不會。content的預設值是no,表示正常顯示。你可以通過只讀屬性window.navigator.standalone來確定網頁是否以全屏模式顯示。
相容性:
iOS 2.1 +
6、format-detection
format-detection 啟動或禁用自動識別頁面中的電話號碼。
語法:
<meta name="format-detection" content="telephone=no">
說明:
預設情況下,裝置會自動識別任何可能是電話號碼的字串。設定telephone=no可以禁用這項功能。
相容性
iOS 1.0 +
7、html5呼叫安卓或者ios的撥號功能
html5提供了自動呼叫撥號的標籤,只要在a標籤的href中新增tel:就可以了。
如下:
<a href="tel:4008106999,1034">400-810-6999 轉 1034</a>
撥打手機直接如下
<a href="tel:15677776767">點選撥打15677776767</a>
8、html5GPS定位功能
具體請看:http://www.haorooms.com/post/html5_GPS_getCurrentPosition
9、上下拉動滾動條時卡頓、慢
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
Android3+和iOS5+支援CSS3的新屬性為overflow-scrolling
10、禁止複製、選中文字
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
解決移動裝置可選中頁面文字(視產品需要而定)
11、長時間按住頁面出現閃退
element {
-webkit-touch-callout: none;
}
12、iphone及ipad下輸入框預設內陰影
Element{
-webkit-appearance: none;
}
13、ios和android下觸控元素時出現半透明灰色遮罩
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
設定alpha值為0就可以去除半透明灰色遮罩,備註:transparent的屬性值在android下無效。
後面一篇文章有詳細介紹,地址:http://www.haorooms.com/post/phone_web_ysk
14、active相容處理
<body ontouchstart="">
15、動畫定義3D啟用硬體加速
Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
注意:3D變形會消耗更多的記憶體與功耗
16、Retina屏的1px邊框
Element{
border-width: thin;
}
17、webkit mask 相容處理
某些低端手機不支援css3 mask,可以選擇性的降級處理。
比如可以使用js判斷來引用不同class:
if( 'WebkitMask' in document.documentElement.style){
alert('支援mask');
} else {
alert('不支援mask');
}
18、旋轉螢幕時,字型大小調整的問題
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}
19、transition閃屏
/設定內嵌的元素在 3D 空間如何呈現:保留3D /
-webkit-transform-style: preserve-3d;
/ 設定進行轉換的元素的背面在面對使用者時是否可見:隱藏 /
-webkit-backface-visibility:hidden;
20、圓角bug
某些Android手機圓角失效
background-clip: padding-box;
21、頂部狀態列背景色
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
說明:
除非你先使用apple-mobile-web-app-capable指定全屏模式,否則這個meta標籤不會起任何作用。
如果content設定為default,則狀態列正常顯示。如果設定為blank,則狀態列會有一個黑色的背景。如果設定為blank-translucent,則狀態列顯示為黑色半透明。如果設定為default或blank,則頁面顯示在狀態列的下方,即狀態列佔據上方部分,頁面佔據下方部分,二者沒有遮擋對方或被遮擋。如果設定為blank-translucent,則頁面會充滿螢幕,其中頁面頂部會被狀態列遮蓋住(會覆蓋頁面20px高度,而iphone4和itouch4的Retina螢幕為40px)。預設值是default。
相容性 iOS 2.1 +
22、設定快取
<meta http-equiv="Cache-Control" content="no-cache" />
手機頁面通常在第一次載入後會進行快取,然後每次重新整理會使用快取而不是去重新向伺服器傳送請求。如果不希望使用快取可以設定no-cache。
23、桌面圖示
<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" />
iOS下針對不同裝置定義不同的桌面圖示。如果不定義則以當前螢幕截圖作為圖示。
24、啟動畫面
<link rel="apple-touch-startup-image" href="start.png"/>
iOS下頁面啟動載入時顯示的畫面圖片,避免載入時的白屏。
可以通過madia來指定不同的大小:
<!--iPhone-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
<!-- iPhone Retina -->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
<!-- iPad portrait -->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
<!-- iPad landscape -->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
<!-- iPad Retina portrait -->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPad Retina landscape -->
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />
25、瀏覽器私有及其它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">
其它
針對手持裝置優化,主要是針對一些老的不識別viewport的瀏覽器,比如黑莓
<meta name="HandheldFriendly" content="true">
微軟的老式瀏覽器
<meta name="MobileOptimized" content="320">
windows phone 點選無高光
<meta name="msapplication-tap-highlight" content="no">
26、 IOS中input鍵盤事件keyup、keydown、keypress支援不是很好
問題是這樣的,用input search做模糊搜尋的時候,在鍵盤裡面輸入關鍵詞,會通過ajax後臺查詢,然後返回資料,然後再對返回的資料進行關鍵詞標紅。用input監聽鍵盤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>
然後就達到類似keyup的效果!
暫時整理以上幾點有關手機網站建設更多的注意事項,後面會陸續補充!
相關文章
- SEO中網站微創新的幾個注意點網站
- 網站提示有風險?注意做好這幾點!網站
- 現在做網站時應注意的幾點重要事項?網站
- 在開發手機app時有幾點需要注意APP
- Collectors.toMap的幾個注意點
- MYSQL 8.0 Upgrade &Downgrade的幾點注意MySql
- 關於CORS 應該注意的幾點CORS
- Python Enum 使用的幾點注意事項Python
- spark效能優化幾點注意Spark優化
- 網站監控網站劫持,網站監控網站劫持有哪些需要注意的網站
- Spring事務需要注意的幾個點Spring
- 關於MongoDB的幾點注意事項UMMongoDB
- 教育網站原始碼:網校系統搭建服務需要注意的幾個問題網站原始碼
- 織夢手機網站模板修改,如何在織夢CMS中修改手機網站模板網站
- 影片高防CDN你應該注意的幾點!
- 解決方案:蘋果手機真的安全嗎?防止個人隱私洩露要注意這幾點蘋果
- 建設網站時需要注意的網站
- 搭建前後需要注意哪幾點?
- 網站黑鏈查詢,網站黑鏈查詢,網站黑鏈查詢需要學會這幾點網站
- 考生注意:高考資訊網站被掛馬機率升高網站
- react手機端專案注意點,ant design-mobile框架React框架
- 網站訪客手機號抓取方法網站
- 抓取網站訪客手機號方法網站
- 選擇等保測評機構需要注意的幾個點-行雲管家
- 如何搭建個人網站,手機、電腦網站一鍵套用網站
- 伺服器打補丁需要注意的幾點伺服器
- Python面試中需要注意的幾點事項!Python面試
- 幾點需要注意選擇APP開發外包團隊的注意事項APP
- Java的幾個不錯的網站Java網站
- 網站URL設計應注意的問題網站
- 網站的設計需要注意什麼?網站
- Windows下使用TensorBoard顯示幾個注意點WindowsORB
- 2019摺疊屏手機來了 你需要了解的幾點
- Mobirise for Mac手機網站建設軟體Mac網站
- 網站如何自適應手機螢幕?網站
- 應用 Laravel 的軟刪除你需要注意的幾點Laravel
- 網站改版需要注意什麼網站
- 網站速度慢,網站速度慢,網站速度慢的幾種原因分析網站
- 央視新聞《玩彩網最新網站》手機搜狐網網站