2. 程式人生 > >viewport的故事（二）

viewport的故事（二）

阿新 • • 發佈：2018-07-13
lock 完全 適配 關心 解決 生產 最好 out 研究

挑重點的翻譯 自原文 https://www.quirksmode.org/mobile/viewports2.html 在這一頁我們將聊一聊移動端的瀏覽器。 移動端的問題 最明顯的問題就是尺寸，比PC端小很多，要麽整體縮小，那麽文字幾乎小到認不出來了，要麽就只能看一部分。 所以我們要讓網站在小屏幕也能很好的展現。 最重要的問題集中在CSS上，尤其是視口的尺寸，如果把PC的一比一放到移動端上，肯定是不起作用的，甚至是有點可怕。 你的布局將會被擠壓變形。 一種方式是為移動瀏覽器做特定的站點。 實際上只有少數網站所有者會充分的去滿足移動端的設備。 移動瀏覽器生產者想給客戶端最好的體驗，就像桌面端一樣完美，一些技巧（sleight of hand）是必要的。 兩個視口（the two viewports）？
 移動端的視口太窄了，那麽很明顯的方案是將視口變得更寬。所以就有了visual viewport和layout viewport。 關於這個概念的解釋：https://stackoverflow.com/questions/6333927/difference-between-visual-viewport-and-layout-viewport 想象布局視口是一個大的圖片，而你只有一個小一點的框，通過這個框去看這個圖像。 這個小框被透明的材質環繞，你只能看到圖像的一部分，這個部分就是visual viewport，就叫它可見視口吧。 你可以把這個圖片拿遠一點，看可以看到全部圖像了 同理把圖片拿近一點就只能看見一部分。 你可以改變框的轉向，但圖像不會變。 也就是說，我們的布局方向和設備方向（可見視口方向）可以不一樣。 CSS布局中的百分比數值，會相對layout viewport來計算，會比可見視口要寬。 因此，html元素會使用layout viewport的寬度。所以css會顯得好像網頁像素值要比手機屏幕的大。 每個設備的布局視口尺寸都不太一樣，iPhone 980px；Android 800px； Opera 850px；IE 974px； 其他的瀏覽器還有特殊的表現：
Symbian WebKit：兩個視口保持一致，但如果使用了絕對值，layout viewport 還是可以伸展到最寬850px； Samsung Webkit： layout viewport 和 最寬的元素保持一致 BlackBerry： 兩個視口保持一致，且不變。
頁面縮放 Zooming 兩個視口都是CSS像素度量。但當可見視口由於縮放導致改變時，布局視口還是保持不變。 比如說頁面放大了，屏幕上的CSS像素就少了。 理解layout viewport 當整個頁面完全縮小到一個頁面的時候，兩個視口的尺寸時一致的，很多瀏覽器默認會使用完全縮小的模式。 當放大頁面的時候，布局視口也是一樣的。 橫屏的時候layout viewport也會自動縮放和visual viewport的寬度保持一致。 web開發者通常不關心高度。 測量layout viewport document.documentElement.clientWidth/Height 可以獲取layout viewport 的尺寸 測量visual viewport
 window.innerWidth/Height 可以獲取visual viewport 的尺寸。 但不幸的是，很多瀏覽器不支持可見視口的測量。 屏幕 zoom level = screen.width/window.innerWidth 滾動偏移 你需要知道的是可見視口相對於布局視口的位置。也是存放在window.pageX/YOffset <html>元素 和桌面端一樣，document.documentElement.offsetWidth/Height 就是html元素的尺寸 媒體查詢 也和桌面端一樣。 width/height使用布局視口。 也就是說 width/height 對應 document.documentElement.clientWidth/Height device-width/height 對應 screen,width/height 媒體查詢可以知道設備是桌面版、平板還是移動設備，但無法區別出具體哪個設備。 事件坐標
pageX/Y page 是最有用的屬性 clientX/Y visual viewport CSS像素值 screenX/Y 設備像素 沒什麽用
meta viewport 可以重新定義 layout viewport 的大小 假設一個頁面只有一個元素，且沒有設置 width 那麽它會自動占滿layout viewport的寬度 大多數瀏覽器會縮小整個頁面，讓 layout viewport 全部顯示在屏幕上 技術分享圖片 所有用戶都會馬上放大頁面，但大多數瀏覽器都會保持元素的寬度不變，就無法同時看到所有內容，不方便閱讀。 技術分享圖片 Android WenKit 是個意外，它為了讓頁面適應屏幕，會減少有文本的元素的尺寸。 你可以試試將html的width 設置為320px；這樣其他元素也會占據320px的寬度。 但也只能在頁面放大的時候正確顯示，瀏覽器默認會將網頁縮小。 技術分享圖片 為了解決這個問題 蘋果就發明了meta viewport標簽 <meta name="viewport" content="width=320"> 就會將layout viewport設置為320px 現在頁面的初始狀態就正常了 技術分享圖片 你可以將layout viewport 的尺寸設置成你想要的大小，包括device-width（screen.width） 嗯 這篇文章看完我還是有點懵圈 不過已經理解了很多 在我沒研究viewport之前，我的頁面是通過媒體查詢給html不同的font-size，然後使用rem做適配的。 這時候的layout viewport的尺寸 應該和document.documentElement.clientWidth 是一樣的 都是980px； 然後我給min-width：1243px 這一檔的font-size設置的是10px； 其余設備設置為20px；在手機上顯示正常 所以在我後來設置了deviceWidth的之後，layout viewport的尺寸就小了很多，所以移動端的字就顯得超級大。 是我原來的方案好呢 還是根據deviceWidth好呢 還是要再研究一下的。

viewport的故事（二）

相關推薦

viewport的故事（二）

lock 完全 適配 關心 解決 生產 最好 out 研究 挑重點的翻譯 自原文 https://www.quirksmode.org/mobile/viewports2.html 在這一頁我們將聊一聊移動端的瀏覽器。 移動端的問題 最明顯的問題就是尺寸，比P

DBC的故事（二）

value signed bsp 解析 解決 正數 有符號數 分享圖片 byte 上篇介紹了MSB和LSB，此篇介紹更復雜的：有符號和無符號數。 1.信號符號 CAN信號有其物理意義，如溫度、扭矩等，這些信號是有負值的，常見的解決方案有2種： 1）把offset設成負

Java練習 SDUT-2733_小鑫の日常系列故事（二）——石頭剪子布

main can cin pri 遊戲 字符串 輸出 pub new 小鑫の日常系列故事（二）——石頭剪子布 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 小鑫在上幼兒園的時候，喜歡跟小夥伴健

2733-小鑫の日常系列故事（二）——石頭剪子布-JAVA

小鑫の日常系列故事（二）——石頭剪子布 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 小鑫在上幼兒園的時候，喜歡跟小夥伴健健玩石頭剪子布的遊戲 ，你能幫他們判斷誰勝誰負麼？ Input

小鑫の日常系列故事（二）——石頭剪子布

Problem Description 小鑫在上幼兒園的時候，喜歡跟小夥伴健健玩石頭剪子布的遊戲 ，你能幫他們判斷誰勝誰負麼？ Input 輸入有兩行，每一行都有可能為“Rock”（石頭），“Scissors”（剪子），”Cloth”（布）。第一行為小鑫的選擇，

C語言訓練-2733-小鑫の日常系列故事（二）——石頭剪子布

Problem Description 小鑫在上幼兒園的時候，喜歡跟小夥伴健健玩石頭剪子布的遊戲 ，你能幫他們判斷誰勝誰負麼？ Input 輸入有兩行，每一行都有可能為“Rock”（石頭），“Scissors”（剪子），”Cloth”（布）。第一行為小鑫的選擇，

小鑫の日常系列故事（二）——石頭剪子布 SDUT

小鑫の日常系列故事（二）——石頭剪子布 SDUT Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 小鑫在上幼兒園的時候，喜歡跟小夥伴健健玩石頭剪子布的遊戲 ，你能幫他

老驢的故事（二）

有無目標的區別 唐太宗貞觀年間，長安城西的一家磨坊裡，有一匹馬和一頭驢子。馬在外面拉東西，驢子在磨坊拉磨。貞觀三年，這匹 馬被玄奘大師選中，隨大師前往印度取經。 17年後，這匹馬馱著佛經回到長安。它重到磨坊見到驢子。老馬談起這次旅途的經歷......，驢子驚歎道：“你有那麼

程式設計師談戀愛的故事（二）

後來，我們還是分手了。 年初分的。 我現在回到了美麗的大雲南。我在創業的路上越走越遠。 她和我說，要結婚，就必須有車有房。我說，沒有問題。但我要慢慢掙，我在公司，半年就混到了部門主管，但是每個月拿著那微薄的工資，感覺離買車買房好遠好遠。我家裡是沒有錢支援我的，我爸媽都是

一個線上音樂軟體的故事（二、其實故事從這裡才開始）

其實故事從這裡才開始 如果你看到了這裡，那你應該看出來，我是在講軟體開發的故事，如果你和我一樣喜歡Linux，喜歡用Python那我希望你也喜歡這個故事。這個故事並不是講如何使用Python的，所以關於如何使用Python推薦你看《Python cookbook 第三版》

mybatis強化（二）Parameters和Result

pan har java onf 關系 throws efault type throw 本文通過一個簡單例子簡單記錄下參數的映射。轉載註明出處：http://www.cnblogs.com/wdfwolf3/p/6804243.html，謝謝。文件目錄如下， 1.配置文

Python 接口測試（二）

expect type version not found 指定 刷新 created 進行 拷貝 三：http狀態碼含義（來源於w3school）： 狀態碼： 1xx: 信息 消息: 描述: 100 Continue 服務器僅接收到部分請求，但是一旦

Struts2框架（二） Web.xml, Struts.xml, Action.Java 基本配置

str web.xml images ava img ima blog XML ges Struts2框架（二） Web.xml, Struts.xml, Action.Java 基本配置

利用css3的animation實現點點點loading動畫效果（二）

設置 str ack rdp 提交 ssi frame spin color box-shadow實現的打點效果 簡介 box-shadow理論上可以生成任意的圖形效果，當然也就可以實現點點點的loading效果了。 實現原理 html代碼，首先需要寫如下html代

學習《第一行代碼》使用實機測試所遇問題（二）

make 代碼 出現 onf msu field menus action java代碼 實機使用酷派大神F1，添加menu後，右上角不出現菜單，此時在java代碼中加入以下方法在onCreate中運行 private void makeActionOverflowMenu

python的列表（二）

數字0 linux play 字符串 pytho head 生成 index color 1、遍歷整個列表 #for 循環 # >>> name_list[‘faker‘, ‘dopa‘, ‘gogoing‘, ‘uzi‘] >>>

JAVA學習第十九課（java程序的異常處理 （二））

num 函數 錯誤 style col 編譯失敗 return [] java 異常處理的捕捉形式： 這是能夠對異常進行針對性處理的方式 六、try、catch的理解 詳細格式： try { //須要被檢測異常的代碼 } catch（異常類 變量）//改變量用

遠程協助開發總結（二）

控制 amp 為什麽不能 username 開發 col dsc exce nec 遠程協助開發的過程中繼續總結 針對開發總結一的問題，改正了一些地方 1.圖像和命令采用兩個套接字，為什麽不能采用一個套接字？遠程協助是快頻的通信，圖像需要不間斷的從受控端發送到控制端，發送接

Java內存模型（二）——重排序

序列 依賴性 種類 如果 禁止 加載 runtime 屬於 style 一、重排序 　　重排序是指為了提高程序的執行效率，編譯器和處理器常常會對語句的執行順序或者指令的執行順序進行重排。 編譯器優化的重排序:編譯器在不改變單線程程序語義的前提下，可以重新安排語句的執行順序

java.util包詳解（二）——Connection接口

操作 相同 元素 叠代 cat roo soft true nbsp Connection接口介紹 　　Connection接口是java集合的root接口，沒有實現類，只有子接口和實現子接口的各種容器。主要用來表示java集合這一大的抽象概念。 　　Connection接