目錄
1、css像素
2、物理像素
3、分辨率
4、devicePixelRatio
5、布局视口layout viewport
6、展示视口visual viewport
7、ideal viewport
首頁 web前端 html教學 webapp尺寸_html/css_WEB-ITnose

webapp尺寸_html/css_WEB-ITnose

Jun 24, 2016 am 11:35 AM

一、viewport宽度

起源:PC端的网站要显示在移动端有什么问题?

  • 如果把移动端的可是区域设置到(320-768)的话,大部分网站都会因为太窄而显示错乱
  • 所以浏览器默认把viewport【这个viewport指的是layout viewport】设置为一个较宽的值980px或者1024px,至少保证PC网站在移动端上可以显示,只是超出部分出行横向滚动。
  • 二、概念

    1、css像素

  • html页面中单位是px,在pc中往往1 css px=1物理像素
  • css像素是相对值,在不同设备中1px对应不同的设备像素;iphone3的分辨率是320*480即1px=1物理像素;iphone4分辨率640*960但是屏幕尺寸没变,意味着同一块区域像素多了1倍,即1 css px=2物理像素。
  • 2、物理像素

  •  表示每英寸所拥有的像素数目,数值越高,代表屏幕能够以更高的密度来显示图像
  • 3、分辨率

  • 显示器能够显示的像素多少,显示器可以显示的像素越多,画面就越精细,同样的屏幕区域能显示的信息就越多。
  • 4、devicePixelRatio

  • window.evicePixelRatio=物理像素/css像素。在iphone4中devicePixelRatio=2也就是1 css像素=2个物理像素。
  • devicePixelRatio在不同浏览器中存在一些兼容性问题,并不是完全可靠的。
  • 5、布局视口layout viewport

  • 移动设备的默认viewport,css布局是以layout viewpot来作为参考系计算的。
  • document.documentElement.clientWidth获取
  • 该尺寸可动态设置。
  • 6、展示视口visual viewport

  • 代表浏览器可视区域的尺寸。当用户放大浏览器时这个尺寸就会变小
  • window.innerWidth获取
  • 7、ideal viewport

  • 屏幕尺寸 设备屏幕的尺寸 单位是物理像素
  • screen.width获取 屏幕尺寸是不变的
  • 在该viewport中用户不需要缩放和横向滚动就可以正常查看网站的所有内容
  • 设置移动端网站一般以这个viewport为准,ideal viewport的宽度等于设备屏幕宽度,使得无论在什么分辨率下,那些针对ideal viewport设计的网站都可以完美的呈现给用户。
  • 三、屏幕适配

    为了能在移动端正常显示PC端的页面,把viewport设置为一个较宽的值,这个viewport是layout viewport。

    因为layout viewport的宽度大于浏览器可视区域的宽度,所以需要一个viewport来代表浏览器可视区域的大小,这就是visual viewport。

    许多网站为移动设备单独设计,所以需要一个能完美适配移动设备的viewport,这个就是ideal viewport。完美适配就是永恒不需要缩放,不需要横向滚动条就能正常查看网站的所有内容。

    ideal viewport没有固定尺寸,不同设备拥有不同的ideal viewport。所有的iphone的ideal viewport都是320px,无论屏幕是320还是640,安卓就比较复杂了,有320px的,有360px的,有384px的等等,关于不同的设备ideal viewport的宽度都为多少,可以到http://viewportsizes.com去查看一下,里面收集了众多设备的理想宽度。

    把移动设备上的viewport分为layout viewport  、 visual viewport   ideal viewport  三类,其中的ideal viewport是最适合移动设备的viewport,ideal viewport的宽度等于移动设备的屏幕宽度,只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px),那么这个元素的宽度就是设备屏幕的宽度了,也就是宽度为100%的效果。ideal viewport 的意义在于,无论在何种分辨率的屏幕下,那些针对ideal viewport 而设计的网站,不需要用户手动缩放,也不需要出现横向滚动条,都可以完美的呈现给用户。

    移动设备默认的viewport是layout viewport,也就是那个比屏幕要宽的viewport,但在进行移动设备网站的开发时,我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢?这就该轮到meta标签出场了。让布局视口宽度就是展示视口。

    <meta name="viewport" content="width=device-width">
    登入後複製

    参考:

    http://www.ituring.com.cn/article/130015

    http://www.cnblogs.com/2050/p/3877280.html

     

    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序,用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    Video Face Swap

    Video Face Swap

    使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

    熱工具

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版,非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺化網頁開發工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    HTML容易為初學者學習嗎? HTML容易為初學者學習嗎? Apr 07, 2025 am 12:11 AM

    HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

    HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

    HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

    了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

    WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

    Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Apr 04, 2025 pm 11:54 PM

    GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...

    HTML中起始標籤的示例是什麼? HTML中起始標籤的示例是什麼? Apr 06, 2025 am 12:04 AM

    AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

    如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? 如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? Apr 05, 2025 am 06:15 AM

    實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中,需要實現一種交互效果:點擊某張圖片,使其周圍的...

    HTML,CSS和JavaScript:Web開發人員的基本工具 HTML,CSS和JavaScript:Web開發人員的基本工具 Apr 09, 2025 am 12:12 AM

    HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

    如何使用JavaScript區分關閉瀏覽器標籤頁和關閉整個瀏覽器? 如何使用JavaScript區分關閉瀏覽器標籤頁和關閉整個瀏覽器? Apr 04, 2025 pm 10:21 PM

    如何在瀏覽器上使用JavaScript區分關閉標籤頁和關閉整個瀏覽器?在日常使用瀏覽器的過程中,用戶可能會同時�...

    See all articles