亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

移動Web頁面,為什么都喜歡width=device-width,并且關閉系統縮放功能?

發布時間:2020-08-06 04:00:16 來源:網絡 閱讀:1530 作者:沒有水勒魚 欄目:移動開發

如題,這種方式做的移動Web頁面,設計稿通常是按照960*640的規格進行設計,再開發的時候,通常會把里面量到的尺寸縮小一半再開發。

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

那既然要縮小一半再開發,為什么不直接設置width=640,然后按照設計稿的尺寸進行開發呢?

對于第一種方法,我暫時能想到好處之后圖片縮小了一半,不知道還有什么其他原因促使大家去用width=device-width

這涉及到了移動設備(ios, android)的屏幕尺寸問題,device-width指的是設備的物理寬度,width是頁面寬度,這么做是為了兼容更多的設備,當然只通過viewport標簽還是不夠的,還需要配合Media Query進行響應式設計。

這兒有兩篇之前翻譯的關于viewport的文章,希望有幫助:
http://weizhifeng.net/viewports.html
http://weizhifeng.net/viewports2.html

在網頁的<head>中增加這句話,可以讓網頁的寬度自動適應手機屏幕的寬度。 其中: width=device-width :表示寬度是設備屏幕的寬度 initial-scale=1.0:表示初始的縮放比例 minimum-scale=0.5:表示最小的縮放比例 maximum-scale=2.0:表示最大的縮放比例 user-scalable=yes:表示用戶是否可以調整縮放比例

手機的屏幕肯定有各種分辨率如果單純固定死640的話,你就看不到其他手機分辨率的效果了

自適應網頁設計參考 http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

視網膜屏幕的分辨率比如 960*640 , 并非所有屏幕都是視網膜屏幕, 比如iPhone3GS的分辨率就是480*320

為了讓頁面在兩者都可以正常顯示,所以視網膜屏幕主機的瀏覽器會做一些 "特殊的動作"(比如如果你什么也不做,就只是設個寬度,你會發現結果出乎你意料,建議你在iPhone4S試一下,它的分辨率剛好是960*640,但是你不加Meta畫一個96*640的div試試) .

真正的原因是一份標簽適應960*640和480*320以及其他(比如電腦,有時候會用電腦或iPad瀏覽手機網頁)

你可以在頁面里寫一個js計算瀏覽器渲染的寬度,你會發現iphone瀏覽器認為自己的寬度只有320px

width=device-width,字體大小才會適合閱讀。你用手機訪問一些網站的時候,看到的頁面和電腦上一樣,字體非常小,需要縮放才能看清,這種就是沒加width=device-width的。

如果布局、字體都沒什么問題,縮放也不是很有必要了。


向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

湘阴县| 南靖县| 安徽省| 葫芦岛市| 灯塔市| 宜君县| 溆浦县| 广昌县| 靖州| 平塘县| 托克托县| 陆河县| 镇巴县| 闵行区| 黎川县| 毕节市| 江口县| 乌兰浩特市| 仪陇县| 丹寨县| 平邑县| 阳西县| 界首市| 孟州市| 伊川县| 咸丰县| 盐源县| 梅州市| 巴林右旗| 镇远县| 津南区| 平南县| 泊头市| 中方县| 鄂温| 灌云县| 庆城县| 额尔古纳市| 南郑县| 沧源| 西盟|