建站
咨詢
售后
建站咨詢
新聞中心
做手機(jī)端頁(yè)面最頭疼的就是物理分辨率和邏輯分辨率的轉(zhuǎn)換了，當(dāng)拿到設(shè)計(jì)圖的時(shí)候，圖基本都是按物理分辨率來(lái)設(shè)計(jì)的，一般常用的為640（iphone5/5s）、750（iphone6/6s），而谷歌等瀏覽器采用小手機(jī)模式瀏覽頁(yè)面的時(shí)候，上面的值為邏輯分辨率，調(diào)試的時(shí)候很難把控頁(yè)面樣式，在手機(jī)端的樣式也會(huì)因此大亂，在頁(yè)面頭部加入以上一段js之后，在手機(jī)端就可以正常顯示了，
var phoneScale = phoneWidth/750;
除以的為設(shè)計(jì)圖設(shè)計(jì)的頁(yè)面寬度，750是按iphone6來(lái)設(shè)計(jì)（根據(jù)自己使用需求來(lái)修改），即讓頁(yè)面的 放大比率=屏幕的邏輯分辨率/物理分辨率，從而達(dá)到適應(yīng)手機(jī)的效果。
（注意，有時(shí)候頁(yè)面加了這段代碼在調(diào)試的時(shí)候，切記刷新，刷新過(guò)后就會(huì)按手機(jī)縮放比例顯示）
概念解析：
phys.width:一般我們所指的寬度width即為phys.width，物理寬度（物理分辨率）
device-width:又稱為css-width，設(shè)備寬度（邏輯分辨率）
其中我們可以獲取phys.width通過(guò)document.documentElement.clientWidth;
而獲取css-width通過(guò) window.screen.width獲取。
所以這里 phoneWidth（邏輯分辨率） = parseInt(window.screen.width);
如iphone6的phys.width為750px，而css-width為375px。
明白一個(gè)瀏覽器默認(rèn)行為。
試想，瀏覽器如果把電腦端的980px的網(wǎng)頁(yè)展現(xiàn)在寬度為750px的iphone6手機(jī)屏上，勢(shì)必會(huì)放不下，手機(jī)端橫向會(huì)出現(xiàn)滾動(dòng)條，怎么阻止這種情況呢，很簡(jiǎn)單，瀏覽器默認(rèn)一個(gè)虛擬窗口，不同瀏覽器有不同的虛擬窗口寬度的默認(rèn)值如：safari iphone：980px;
opera:850px;
Andriod webkit:800px;
IE:974px;
然后會(huì)把這個(gè)980px虛擬窗口裝進(jìn)寬度為750px的iphone6中，當(dāng)然這樣的話必須縮放，這就是為什么在手機(jī)中展現(xiàn)電腦端頁(yè)面沒(méi)有出現(xiàn)橫向滾動(dòng)條，而且字跡明顯變小的原因。
initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+'
這段代碼切記要指定 initial-scale=***，在安卓系統(tǒng)中，不指定默認(rèn)的nitial-scale=***，只指定最小和大縮放值，也可以正常顯示，但是safari瀏覽器則會(huì)失效，對(duì)于寬度是100%的頁(yè)面， 則顯示為頁(yè)面的30%左右的寬。
target-densitydpi=device-dpi
WebKit內(nèi)核默認(rèn)按照160的DPI來(lái)排版。假如設(shè)備真實(shí)DPI是480，寬度是1080，在WebKit會(huì)按160DPI，360寬度來(lái)排版。排版結(jié)束后在放大到1080寬。
所以當(dāng)取window.innerwidth之類的值的時(shí)候，取的是WebKit實(shí)際排版寬度360，而不是1080.
target-densitydpi=device-dpi可以強(qiáng)制內(nèi)核以480DPI排版，使畫(huà)面更精細(xì)，window.innerwidth也將為屏幕寬度1080.
但WebKit從去年開(kāi)始取消了對(duì)target-densitydpi的支持。（所以現(xiàn)在不建議寫(xiě)該屬性了）
想實(shí)現(xiàn)target-densitydpi=device-dpi的效果有什么方法？提交此次補(bǔ)丁的WebKit開(kāi)發(fā)者說(shuō)可以用responsive p_w_picpaths 和 CSS device units來(lái)替代。
（2017.02.20更新）
參考鏈接：http://www.cnblogs.com/wbxjiayou/p/5176815.html
http://blog.csdn.net/fengri5566/article/details/9414599
相關(guān)鏈接：http://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.html
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
網(wǎng)頁(yè)名稱：移動(dòng)端頁(yè)面按手機(jī)屏幕分辨率自動(dòng)縮放的js-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://www.dlmjj.cn/article/dsjppj.html
