標籤：縮放 郵箱 idt 顯示器 hone android one strong 轉換
一、px em rem
px像素（Pixel）。相對長度單位。像素px是相對於顯示器螢幕解析度而言的。
em是相對長度單位。相對於當前對象內文本的字型尺寸。如當前對行內文本的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。em會繼承父級元素的字型大小。
rem是CSS3新增的一個相對單位（root em，根em），這個單位引起了廣泛關注。這個單位與em有什麼區別呢？區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是HTML根項目。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根項目就成比例地調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支援rem。對於不支援它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字型大小。
對於需要適配各種行動裝置，推薦使用rem，例如只需要適配iPhone和iPad等解析度差別比較挺大的裝置。
完美適配方案：
$(function(){
//設定rem
function mobile(){
var size=100, //規定rem與px之間值的轉換
maxWidth =750; //設定基準寬度。
ratio = function(){
var r = document.documentElement.clientWidth / maxWidth;
return r>=1?1:r<=0.234?0.234:r;
};
set = function(){
document.documentElement.style.fontSize = ratio() * size +‘px‘;
}();
window.onresize = mobile;
}
mobile();
})
二、Media Queries
直譯為媒體查詢，在CSS中寫下不同螢幕下使用不同的CSS來實現螢幕適配，這個方式不但可以進行字型的適配還能實現不同介面顯示不同的樣式：
CSS中根據要求寫不同的螢幕範圍，如下:
@media screen and (min-width: 240px) and(max-width:750px){
html {font-size: 20px; }
}
三、HTML代碼頭部添加<meta>
H5頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
忽略將頁面中的數字識別為電話號碼
<meta name="format-detection" content="telephone=no" />
忽略Android平台中對郵箱地址的識別
<meta name="format-detection" content="email=no" />
當網站添加到主畫面快速啟動方式，可隱藏地址欄，僅針對ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- ios7.0版本以後，safari上已看不到效果 -->
將網站添加到主畫面快速啟動方式，僅針對ios的safari頂端狀態條的樣式
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 可選default、black、black-translucent -->
viewport模板 <!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>標題</title><link rel="stylesheet" href="index.css"></head><body>這裡開始內容</body></html> |
四、百分比的使用
要想螢幕適配的好，就多用百分比來作為寬高的值。這一般是用在css上。
待續......
html5做webAPP介面適配總結
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
