前端開發(fā) meta name="viewport" 的用法
移動(dòng)端的布局不同于pc端，首先我們要知道在移動(dòng)端中，css中的1px并不等于物理上的1px，因?yàn)槭謾C(jī)屏幕的分辨率已經(jīng)越來越高，高像素但是屏幕尺寸卻沒有發(fā)生太大變化，那就意味著一個(gè)物理像素點(diǎn)實(shí)際上塞入了好幾個(gè)像素。
在移動(dòng)端瀏覽器中以及某些桌面瀏覽器中，window對(duì)象有一個(gè)devicePixelRatio屬性，它的官方的定義為：設(shè)備物理像素和設(shè)備獨(dú)立像素的比例，也就是 devicePixelRatio = 物理像素 / 獨(dú)立像素。css中的px就可以看做是設(shè)備的獨(dú)立像素，所以通過devicePixelRatio，我們可以知道該設(shè)備上一個(gè)css像素代表多少個(gè)物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值為2，也就是說1個(gè)css像素相當(dāng)于2個(gè)物理像素。但是要注意的是，devicePixelRatio在不同的瀏覽器中還存在些許的兼容性問題，所以我們現(xiàn)在還并不能完全信賴這個(gè)東西。
還有一個(gè)因素也會(huì)引起css中px的變化，那就是用戶縮放。例如，當(dāng)用戶把頁面放大一倍，那么css中1px所代表的物理像素也會(huì)增加一倍；反之把頁面縮小一倍，css中1px所代表的物理像素也會(huì)減少一倍。
所以在做移動(dòng)端開發(fā)時(shí)，為了使移動(dòng)端的頁面在不同的手機(jī)上同樣的大小來顯示，我們可以將頁面的寬度固定，然后獲取設(shè)備的寬度，可以得到我們之前設(shè)定的寬度與設(shè)備寬度的比例，再使用HTML5新增的viewport來對(duì)頁面進(jìn)行縮放，并固定不允許用戶再重新縮放。
在看viewport的具體用法之前，我們先搞清楚幾個(gè)概念。
1、layout viewport：
layout viewport 是網(wǎng)頁的所有內(nèi)容，他可以全部或者部分展示給用戶。
2、visual viewport
visual viewport 就是當(dāng)前顯示給用戶內(nèi)容的窗口，你可以拖動(dòng)或者放大縮小網(wǎng)頁。
viewport具體用法為:
使用該meta標(biāo)簽時(shí)，在content中寫屬性，用逗號(hào)隔開
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
本文鏈接：http://m.xlyongde.com.cn/news/details-12-735.html
版權(quán)聲明：
1：本站所有內(nèi)容均由互聯(lián)網(wǎng)收集整理、上傳，并且以計(jì)算機(jī)技術(shù)研究交流為目的，僅供大家參考、學(xué)習(xí)，不存在任何商業(yè)目的與商業(yè)用途，如描述有誤或者學(xué)術(shù)不對(duì)之處歡迎及時(shí)提出，不甚感謝。
2、 如涉及版權(quán)問題，請(qǐng)聯(lián)系我們4724325@qq.com第一時(shí)間處理；
我們從以下三個(gè)方面，對(duì)比純靜態(tài)和偽靜態(tài)兩種靜態(tài)頁面生成方式，逐一展開分析。
用JS的正則表達(dá)式如何判斷輸入框內(nèi)為中文或者是英文數(shù)字，或者是三者混編
css制作扇形
純CSS3文字Loading動(dòng)畫特效
PhpStorm 2022.1 EAP 3 在 PHPDoc 和屬性中添加了對(duì)多行和嵌套數(shù)組形狀的完全支持：在這種情況下，可以使用數(shù)組形狀注釋定義數(shù)組結(jié)構(gòu)，以獲得鍵的代碼補(bǔ)全并推斷值的類型。
PHP作為Web界第一大語言近年來熱度不夠，但是這幾年的進(jìn)步和成長(zhǎng)卻沒有中斷。在2022伊始，我們來一起學(xué)習(xí)一下目前PHP的現(xiàn)狀以及最新版本帶來的特性。
Linux程序前臺(tái)后臺(tái)切換：在Linux終端運(yùn)行命令的時(shí)候，在命令末尾加上 & 符號(hào)，就可以讓程序在后臺(tái)運(yùn)行Ubuntu$">root@Ubuntu$ ./tcpserv01 &
Python 的正則表達(dá)式支持 多行模式，將每行文字分別匹配。然而各種操作系統(tǒng)里，換行符的表示法各不相同，會(huì)導(dǎo)致 Python 不能正確使用多行模式。