Webapp meta標籤解決移動縮放的問題

2021-09-24 23:33:42 字數 2154 閱讀 2291

<

meta

name

=" viewport"

content

="width=device-width initial-scale=1.0 minimum-scale=1.0 miximum=1.0 user-scalable=yes"

/>

下面是對於這個標籤的具體說明:

viewport 語法介紹:

width

width表示網頁的布局layout寬度,控制 viewport 的大小,可以指定的乙個值(預設單位px)或者特殊的值,如:

width=960, initial-scale=0.33(960是頁面layout的寬度,這裡設width意思是將其它縮小到大約1/3,這樣正好可以在320畫素的手機裝置上看到整個網頁)

或width=device-width(裝置的寬度,通用寫法)

height

和width用法相同,指定高度。

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. 這個值的範圍必須在70–400之間。

1 2

3 4

5 6

為了防止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倍。

minimum-scale

最小縮放,用法同maximum-scale相同

user-scalable

使用者調整縮放。即使用者是否能改變頁面縮放程度。如果設定為yes則是允許使用者對其進行改變,反之為no。預設值是yes。如果你將其設定為no,那麼minimum-scale 和 maximum-scale都將被忽略,因為根本不可能縮放。

注意:所有的縮放值都必須在0.01–10的範圍之內。

1、的用處

在手機上瀏覽時,該標籤用於指定是否將網頁內容中的手機號碼顯示為撥號的超連結。

在 iphone 上預設值是:

如果你不希望手機自動將網頁中的**號碼顯示為撥號的超連結,那麼可以這樣寫:

作用是控制狀態列顯示樣式:

p標籤中有span標籤,垂直居中時pc與移動的坑

題外話 修改別人的 真的很辛苦,請各位前端er編寫 的時候要時時刻刻的問自己 方便維護嗎?正題來了,mm遇到了個什麼坑呢?上圖 第一張圖是用chrome的firebug調整到移動端大小的效果 第二張圖是真機測試,移動端的效果 html截圖 css截圖 p no line break 的內涵 是將超出...

OTT解決方案的直播時移技術

直播時移的原理 流 伺服器系統 對流進行打包 分發,最終同步輸出到各種終端,如電視 pc pad 手機。終端使用者看到的直播內容就可以及時回看而不必要等到第二天的回放。直播時移優勢 直播時移技術採用獨特而高效的方式實現,無限長儲存和實時流快取結合,在這之間實現了錄播和直播無縫融合。使用者可以任意選擇...

解決UEditor將div標籤換成p標籤的問題

將設計排版好的頁面html 上傳到資料庫,再讀取出來的時候發現所有的div都被替換成了p標籤。解決方法 首先在ueditor.all.js檔案內搜尋allowdivtranstop,找到如下的 將true設定為false me.setopt 然後在ueditor.config.js檔案內搜尋allo...