網(wǎng)上關(guān)于這方面的文章有很多,重復(fù)的東西本文不再贅述,僅提供思路,并解釋一些其他文章講述模糊的地方。
1、使用meta標(biāo)簽,這也是普遍使用的方法,理論上講使用這個(gè)標(biāo)簽是可以適應(yīng)所有尺寸的屏幕的,但是各設(shè)備對(duì)該標(biāo)簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統(tǒng)。
首先解釋該標(biāo)簽的含義:
meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
如果你完全不了解這個(gè)標(biāo)簽的使用需要先百度一下。
解釋?zhuān)篶ontent中的“width” 這個(gè)width指的是什么寬度,我看過(guò)的文章對(duì)這個(gè)都沒(méi)有解釋的很清楚,有幾個(gè)備選:虛擬窗口的寬度、手機(jī)屏幕的寬度、還是頁(yè)面的寬度等等?經(jīng)試驗(yàn)這個(gè)指的是虛擬窗口的寬度。了解寬度之后,對(duì)后續(xù)的各種scale,就應(yīng)該知道是誰(shuí)與誰(shuí)的比例,是 虛擬窗口寬度 / 頁(yè)面寬度,這樣就會(huì)有問(wèn)題出現(xiàn)安卓設(shè)備尺寸差異很大光主流的就有寬度為 320 480 720 1080 等各種尺寸而以上標(biāo)簽只能支持一種尺寸,當(dāng)然有些瀏覽器會(huì)自動(dòng)縮放使其適應(yīng)屏幕,但這不是統(tǒng)一標(biāo)準(zhǔn),正確的做法是用js動(dòng)態(tài)生成此標(biāo)簽,當(dāng)然,應(yīng)該先獲取屏幕尺寸。
script type="text/javascript">
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
document.write(‘meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘);
}else{
document.write(‘meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘);
}
} else {
document.write(‘meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘);
}
/script>
對(duì)于此標(biāo)簽還有以下需要分享:
1)、user-scalable=no就一定可以保證頁(yè)面不可以縮放嗎?NO,有些瀏覽器不吃這一套,還有一招就是minimum-scale=1.0, maximum-scale=1.0 最大與最小縮放比例都設(shè)為1.0就可以了。
2)、initial-scale=1.0 初始縮放比例受user-scalable控制嗎?不一定,有些瀏覽器會(huì)將user-scalable理解為用戶手動(dòng)縮放,如果user-scalable=no,initial-scale將無(wú)法生效。
3)、手機(jī)頁(yè)面可以觸摸移動(dòng),但是如果有需要禁止此操作,就是頁(yè)面寬度等于屏幕寬度是頁(yè)面正好適應(yīng)屏幕才可以保證頁(yè)面不能移動(dòng)。
4)、如果頁(yè)面是經(jīng)過(guò)縮小適應(yīng)屏幕寬度的,會(huì)出現(xiàn)一個(gè)問(wèn)題,當(dāng)文本框被激活(獲取焦點(diǎn))時(shí),頁(yè)面會(huì)放大至原來(lái)尺寸。
以上是使用viewport標(biāo)簽的一些小體會(huì),分享給大家。
3、百分比法,首先應(yīng)明確一個(gè)概年,CSS中的百分比中的百指的是什么,我告訴你指的是父元素,所有百分比都是這樣的。子元素寬度50%,那么父元素的寬度就是百,子元素的padding-left:50%,父元素的寬度是百,子元素的margin-top:20%,那么父元素的高是百。所以body默認(rèn)寬度是屏幕寬度(PC中指的是瀏覽器寬度)子孫元素按百分比定位(或指定尺寸)就可以了,這只適合布局簡(jiǎn)單的頁(yè)面,復(fù)雜的頁(yè)面實(shí)現(xiàn)很困難。
4、使用css3單位rem,有人這樣解釋rem,root-em,就是根部的em,想必em大家都懂的,那么rem就是將根節(jié)點(diǎn)html的font-size的值作為整個(gè)頁(yè)面的基準(zhǔn)尺寸,默認(rèn)html的font-size是16px,即1rem=16px,如果某div寬度為32px你可以設(shè)為2rem。當(dāng)我們把html的font-size設(shè)為20px時(shí),1rem=20px,那么32px=1.6rem了。到這里我們也就了解了rem的用法了,那么怎么用rem來(lái)實(shí)現(xiàn)不同尺寸屏幕的自適應(yīng)呢?在頁(yè)面載入開(kāi)始時(shí)首先判斷window的寬度(是window的寬度($(window).width()),不是屏幕分辯率的寬度(screen.width),兩者的差別請(qǐng)自行查閱),假設(shè)寬度為W,一個(gè)div在寬度為640px的設(shè)計(jì)稿的下的寬度為dW1,這樣如果html的font-size為100px,那么這個(gè)div的寬度用rem表示是多少呢?計(jì)算:div寬度dW2=dW1/100,px與rem之間很好換算,除以100就可以,這是假定屏幕寬度為640的,而不同寬度的屏幕怎么處理,為了能保證換算容易那就要為html設(shè)置一個(gè)合適的font-size,計(jì)算:100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;
解釋一下為什么把100作為一個(gè)縮放比例,用10或1不是更方便嗎,這是因?yàn)榇蠖鄶?shù)瀏覽器font-size的最小值為12px,所以只能用100了。所以會(huì)在頭部加上這個(gè)JS代碼
script type="text/javascript">
var html = document.querySelector(‘html‘);
var rem = html.offsetWidth / 6.4;
html.style.fontSize = rem + "px";
/script>
5、媒體查詢,媒體查詢也是css3的方法,我們要解決的問(wèn)題是適應(yīng)手機(jī)屏幕,這個(gè)媒體查詢正是為解決這個(gè)問(wèn)題而生,媒體查詢的功能就是為不同的媒體設(shè)置不同的css樣式,這里的“媒體”包括頁(yè)面尺寸,設(shè)備屏幕尺寸等,比如我們要為寬度小于480px的頁(yè)面中的class="icon"的元素設(shè)置樣式,可以這樣寫(xiě),@media screen and (max-width=480px) {.icon{ some styles }};這里僅介紹這種思路,關(guān)于媒體查詢的詳細(xì)用法請(qǐng)參閱css手冊(cè)。
綜上,至今,我沒(méi)有找到一種完全適應(yīng)各種屏幕的方法,只能根據(jù)頁(yè)面特點(diǎn)選擇不同的方法,多種方法靈活運(yùn)用,才是王道。
通過(guò)此文,希望能幫助大家解決HTML5 自適應(yīng)手機(jī)屏幕寬度的問(wèn)題,謝謝大家對(duì)本站的支持!
您可能感興趣的文章:- 微信小程序 圖片等比例縮放(圖片自適應(yīng)屏幕)
- 4種Android屏幕自適應(yīng)解決方案
- iOS Webview自適應(yīng)實(shí)際內(nèi)容高度的4種方法詳解
- jQuery自適應(yīng)輪播圖插件Swiper用法示例
- BootStrap table表格插件自適應(yīng)固定表頭(超好用)
- jQuery簡(jiǎn)單實(shí)現(xiàn)iframe的高度根據(jù)頁(yè)面內(nèi)容自適應(yīng)的方法
- EasyUI布局 高度自適應(yīng)
- JQuery EasyUI Layout 在from布局自適應(yīng)窗口大小的實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)布局高寬自適應(yīng)的簡(jiǎn)單實(shí)例
- 移動(dòng)開(kāi)發(fā)之自適應(yīng)手機(jī)屏幕寬度