您現在的位置是:電腦技術吧?>? 組裝維修 ??>??viewport詳解,html viewport??>??正文詳情

viewport詳解,html viewport

望余馥2019-11-27 11:21:47 人圍觀
簡介meta viewportHTML5的視窗使我們開發的應用程序或頁面大小能夠適應各種手機的不同分辨率和屏幕大小。viewport語法簡介:content=height=[像素值|設備高度wpf viewport3d

html5的viewport使我們開發出來的應用或頁面大小能適合各種手機不同的分辨率,不同屏幕大小。

viewport 語法介紹:  content=  height = [pixel_value | device-height],  width = [pixel_value | device-width ],  initial-scale = float_value,  minimum-scale = float_value,  maximum-scale = float_value,  user-scalable = [yes | no],  target-densitydpi = [dpi_value | device-dpi | high-dpi |  medium-dpi | low-dpi]    /  width  控制 viewport 的大小,可以指定的一個值或者特殊的值,如 device-width 為設備的寬度(單位為縮放為 100% 時的 CSS 的像素)。

  height  指定高度設備的高度。

  target-densitydpi  一個屏幕像素密度是由屏幕分辨率決定的,通常定義為每英寸點的數量(dpi)。

Android支持三種屏幕像素密度:低像素密度,中像素密度,高像素密度。

一個低像素密度的屏幕每英寸上的像素點更少,而一個高像素密度的屏幕每英寸上的像素點更多。

Android Browser和WebView默認屏幕為中像素密度。

  下面是 target-densitydpi 屬性的 取值范圍  device-dpi 使用設備原本的 dpi 作為目標 dp。

不會發生默認縮放。

  high-dpi 使用hdpi 作為目標 dpi。

中等像素密度和低像素密度設備相應縮小。

  medium-dpi 使用mdpi作為目標 dpi。

高像素密度設備相應放大, 像素密度設備相應縮小, 這是默認的target density。

  low-dpi -使用mdpi作為目標 dpi。

中等像素密度和高像素密度設備相應放大。

  指定一個具體的dpi 值作為target dpi. 這個值的范圍必須在70400之間。

  為了防止Android Browser和WebView 根據不同屏幕的像素密度對你的頁面進行縮放,你可以將viewport的target-densitydpi 設置為 device-dpi。

當你這么做了,頁面將不會縮放。

相反,頁面會根據當前屏幕的像素密度進行展示。

在這種情形下,你還需要將viewport的width定義為與設備的width匹配,這樣你的頁面就可以和屏幕相適應。

  initial-scale  初始縮放。

即頁面初始縮放程度。

這是一個浮點值,是頁面大小的一個乘數。

例如,如果你設置初始縮放為1.0,那么,web頁面在展現的時候就會以target density分辨率的1:1來展現。

如果你設置為2.0,那么這個頁面就會放大為2倍。

  maximum-scale  最大縮放。

即允許的最大縮放程度。

這也是一個浮點值,用以指出頁面大小與屏幕大小相比的最大乘數。

例如,如果你將這個值設置為2.0,那么這個頁面與target size相比,最多能放大2倍。

  user-scalable  用戶調整縮放。

即用戶是否能改變頁面縮放程度。

如果設置為yes則是允許用戶對其進行改變,反之為no。

默認值是yes。

如果你將其設置為no,那么minimum-scale 和 maximum-scale都將被忽略,因為根本不可能縮放。

  所有的縮放值都必須在0.0110的范圍之內。

  例:  (設置屏幕寬度為設備寬度,禁止用戶手動調整縮放)  (設置屏幕密度為高頻,中頻,低頻自動縮放,禁止用戶手動調整縮放)  initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no/ 注:更多精彩教程請關注電腦高手圖文教程 頻道,

版權聲明:本文由 望余馥 整理編輯。

原標題:響應式布局viewport,html開發手冊

轉載注明出處:http://www.dn9ww09s.icu/assemble/14566.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • win10系統盤多大,系統盤

    win10系統盤多大,系統盤 相關圖片win10重裝系統教程微軟發布的Windows 10不僅有計算機操作系統,還有移動操作系統。windows 10手機操作系統類似于計算機的文件系統,這使得我們更容易管理手機中存儲的文硬盤分區教程...

  • Git使用詳細教程,skyiar詳細使用教程

    Git使用詳細教程,skyiar詳細使用教程 相關圖片pspice使用教程什么是柔性盒子?靈活的可伸縮性,箱型箱,這可以理解為一種新的箱型膨脹箱模型。這是CSS3規范提出的新一代布局模塊,它基于我們非常熟悉的原始塊、內聯塊和內聯塊...

  • win10新功能能,win10有哪些新功能

    win10新功能能,win10有哪些新功能 相關圖片windows10分屏最近,微軟對win10系統進行了第一次重大更新,帶來了許多新功能和功能上的變化。除了明顯的變化外,這次更新還帶來了一些隱藏的功能。現在讓我們去超人那里把你可能找...

  • 導航欄導航欄,pyqt5導航欄怎樣實現

    導航欄導航欄,pyqt5導航欄怎樣實現 相關圖片導航欄的下拉菜單以上是一個渲染,代碼如下:htmlxml/HTML code將內容復制到剪貼板navul class=NAV ullia href=/homepage/a/Li500導航第一導航欄導航...

  • 如何安裝office2013,安裝office2013

    如何安裝office2013,安裝office2013 相關圖片office怎么安裝Win10系統已發布。我相信很多小業主也升級了系統。作為一個非常重要的辦公軟件,office是安裝必備的軟件之一,但是如何安裝win10系統呢?今天超人帶來的woffice2013安裝回...

  • 切換輸入法,如何切換輸入法

    切換輸入法,如何切換輸入法 相關圖片輸入法切換快捷鍵您是否遇到win10系統的輸入方法無法切換的情況?如果是,我們該怎么辦?我相信很多朋友都遇到過這個問題。別擔心。超人編輯將為你分享Win10的解決方案輸入法怎么...

  • 實現了三個效果,實現了效果

    實現了三個效果,實現了效果 相關圖片價值實現的效果show()/hide()show()/hide()的實現主要控制元素的display屬性。HTML:XML/HTML代碼復制內容到剪貼板DIVID= BOX輸將目的實現效果...

  • 視頻怎么剪輯,如何剪輯視頻中的一段

    視頻怎么剪輯,如何剪輯視頻中的一段 相關圖片卡點視頻怎么剪輯有兩種方法可以使用love clip自由剪輯視頻片段。首先,單擊主界面右上角預覽框時間進度條上的向下箭頭(快捷鍵Ctrl e),打開創新的時間線面板,將音頻波形手機怎...

  • 什么是響應式編程,響應式編程

    什么是響應式編程,響應式編程 相關圖片spring5響應式編程如今,響應式網頁設計無疑非常流行。對于新人來說,響應式設計聽起來有點復雜,但事實上,它比你想象的要簡單得多。為了幫助您開始響應式web設計,我編寫了一個...

  • 瀏覽器卡慢怎么解決,瀏覽器打開慢什么原因

    瀏覽器卡慢怎么解決,瀏覽器打開慢什么原因 相關圖片ie瀏覽器閃退怎么解決在使用win7系統時,當打開IE時沒有響應時,您會選擇終止進程,然后重新打開IE。但是如果再次發生這種情況,您會怎么做?你不能一直重新開始,是嗎?下面的超...

熱評文章

  • 如何簽到領流量,每天簽到領流量

    如何簽到領流量,每天簽到領流量 相關圖片免費簽到領流量近日,百度移動發起了流量采集登錄活動。很多小伙伴不知道如何接收百度手機的流量報到和投遞。屆時,超人軟件將為您帶來手機百度iPhone版的簽到和發送流量的方法...

  • 標準編寫規范,規范標準的編寫方法

    標準編寫規范,規范標準的編寫方法 相關圖片產品規范編寫標準作為一般規則,避免過度約束,不要添加不必要的約束CSS代碼將內容復制到剪貼板//bad UL?someid{..}。菜單?otherid{..}/好的?some文檔編寫規范...

  • 0xc1900101,0x8024000b

    0xc1900101,0x8024000b 相關圖片win100xc1900101將win7或win8.1升級到win10并不容易。自7月29日windows 10正式發布以來,各種問題層出不窮。其中之一是錯誤代碼0xc19000x20017...

  • oppo手機怎么連接電視機,手機怎么連接電視步驟

    oppo手機怎么連接電視機,手機怎么連接電視步驟 相關圖片vivo手機有dlna功能嗎隨著科學技術的不斷進步,現在我們不僅可以把電視和電腦連接起來,還可以把手中的小智能手機和電腦連接起來。如何將手機連接到電視上?今天,超人的小制作、...

  • 浮動的元素能怎么居中,浮動元素居中

    浮動的元素能怎么居中,浮動元素居中 相關圖片如何讓浮動的div居中方法1:將容器的浮動模式設置為絕對定位,然后確定容器的寬度和高度,例如寬度為500、高度為300的層,然后將層的外部邊距設置為CSS代碼,將內容復制到剪貼板...

  • 美顏相機眼淚,美顏相機怎么能弄眼淚

    美顏相機眼淚,美顏相機怎么能弄眼淚 相關圖片美顏相機哪個好用美的相機是一個強大的照片美化軟件。最近,很多小朋友都說看到朋友們在曬眼睛和化妝,覺得很美。那么美妝相機的新催淚效果呢?接下來,超人軟件編輯將為您介...

  • 指南的編寫過程,指南編寫格式

    指南的編寫過程,指南編寫格式 相關圖片運作手冊編寫指南代碼如下:[selector]{[property]:[value];[-declaration-]}P[selector]{[property]:[value指南編寫樣章...

  • 全民K歌,全民k歌5.3.7

    全民K歌,全民k歌5.3.7 相關圖片全民k歌6.1版本民族卡拉OK是一款非常有趣的手機卡拉OK軟件,用戶不用出門就能感受到卡拉OK的樂趣。用戶還可以在聽到自己喜愛的歌手的歌聲時送上禮物表示支持。那么如何贈送全國卡...

  • 軟件undefined是什么意,下載undefined是什么意思

    軟件undefined是什么意,下載undefined是什么意思 相關圖片undefined吧win10系統越來越穩定,許多微軟用戶正在將自己的計算機系統升級為win10系統。然而,許多用戶報告他們正在下載更新的FBL﹣expression profesundefined錯誤代碼...

  • 's和s'的用法,最高級的用法

    's和s'的用法,最高級的用法 相關圖片比較級的用法和句型準限定選擇器您應該避免過度修改選擇器,例如,如果您可以編寫。NAV{},盡量不要寫UL。導航{}。過度修改選擇器將影響選擇器的性能、類的可重用性和私有度。這...

關注微信

变脸官网查询