1. 程式人生 > >HTML5螢幕適配標籤設定

HTML5螢幕適配標籤設定

開發HTML5遊戲中,我們常用的一些mata標籤:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> 

 
width: viewport 的寬度 (範圍從 200 到 10,000 ,預設為 980 畫素 )

height: viewport 的高度 (範圍從 223 到 10,000 )

initial-scale: 初始的縮放比例 (範圍從>0到 10 )

minimum-scale: 允許使用者縮放到的最小比例

maximum-scale: 允許使用者縮放到的最大比例

user-scalable: 使用者是否可以手動縮放

下面是我們經常用到的一些標籤,由於瀏覽器的差異,並不能百分百相容。

<!-- 是否刪除預設的蘋果工具欄和選單欄 -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- 其他的meta設定 -->
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">

<!-- 避免IE使用相容模式 -->
<meta
http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持裝置優化,主要是針對一些老的不識別viewport的瀏覽器,比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微軟的老式瀏覽器 --> <meta name="MobileOptimized" content="320"> <!-- uc強制豎屏 --> <meta name="screen-orientation" content="portrait"
>
<!-- QQ強制豎屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC強制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ強制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC應用模式 --> <meta name="browsermode" content="application"> <!-- QQ應用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 點選無高光 --> <meta name="msapplication-tap-highlight" content="no">

此外,apple還有兩個有趣的標籤:

1. apple-touch-icon

< link  rel= "apple-touch-icon"  sizes= "76x76"  href= "touch-icon-ipad.png">

如果 apple-mobile-web-app-capable 設定為 yes 了,那麼在蘋果機的safari上可以通過新增到主屏按鈕將網站新增到主螢幕上。而設定相應 apple-touch-icon 標籤,則新增到主屏上的圖示就會使用我們指定的圖片。

2. apple-touch-startup-image

< link rel= "apple-touch-startup-image" href= "/startup.png">

基於 apple-mobile-web-app-capable 設定為 yes ,可以為WebApp設定一個類似NativeApp的啟動畫面。和 apple-touch-icon 不同, apple-mobile-web-app-capable 不支援sizes屬性,要使用media來載入不同的啟動畫面。詳細查詢 大漠的文章 。

// iPhone
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
// iPhone Retina
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

參考:

相關推薦

HTML5螢幕標籤設定

開發HTML5遊戲中,我們常用的一些mata標籤: <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />  

PhaserJS 3 螢幕時的小坑 -- JavaScript Html5 遊戲開發

  PhaserJS 巨坑:在config內不要把 width 設為 window.innnerWidth在config內不要把 width 設為 window.innnerWidth在config內不要把 width 設為 window.i

rem與media標籤實現移動端螢幕

下面四個方案來自同事共享,原理都是採用等比縮放的方式 —— 獲得目標螢幕寬度和設計稿寬度的比,作為 rem 的基值(縮放係數),設定為html標籤的字型大小。不同的只是在於效能取捨和書寫習慣。方案1@media screen and (min-width: 320px) {html{font-size:50

【移動端方案一 彈性佈局】@media標籤+rem+viewport實現移動端螢幕

一、從設計稿說起:採用rem來佈局,其實設計稿是多大都沒有關係,設計稿給480、600或者750都可以,其他尺寸也可以,你就想成它是一張A4紙,然後這些數字只是對這張紙的最大計量單位。反正一張圖就那麼大,無論計量單位是多少,UI設計師能夠在一張A4上給的東西都是一樣的。比如說

HTML5與CSS3視口-retina螢幕

1.視口 視口是移動裝置上用來顯示網頁的區域,一般會比移動裝置可視區域大,寬度可能是980px或者1024px,目的是為了顯示下整個為PC端設計的網頁,這樣會讓移動端出現橫向滾動條,為了避免這種情況,移動端會將視口縮放到移動端視窗的大小,這樣會讓網頁不容易觀看,可以使用meta標籤,name="viewpo

html5開發之viewport使用-螢幕

隨著高階手機(Andriod,Iphone,Ipod,WinPhone等)的盛行,移動互聯應用開發也越來越受到人們的重視,用html5開發移動應用是最好的選擇。然而,每一款手機有不同的解析度,不同螢幕大小,如何使我們開發出來的應用或頁面大小能適合各種高階手機使用呢?學習h

微信十人牛牛房卡html5實現分層螢幕

螢幕適配螢幕適配應當指內容 適配區 和 螢幕區 間的適配關係。單屏適配有 contain、cover 或 fill,多屏常見是 依寬 。contain 和 cover 還需要 定位 來處理留白和超出的內容。而同一個 H5 裡不同內容往往用不同適配方式,即 分層。優選CSS頁面

Unity2D 通過Canvas來設定螢幕

我們在使用Unity製作2D遊戲時,需要考慮螢幕適配的問題,以前是通過設定Camera的size視口大小來解決,這種方式在網上很多。 下面我介紹一種更簡單的方式,我們都知道UGUI的螢幕適配功能很強,那麼我們為什麼不借助它來設定我們Sprites root層的縮放大小呢。只

Android螢幕3-動態獲取螢幕寬高及動態設定控制元件寬高

1、問題 在螢幕適配中,要求應用在不同的螢幕上顯示一樣的效果時,我們的佈局可以採用百分比來定位,也就是 layout_weight,但對於一些層層巢狀或更加複雜的情況下,使用百分比的效果並不是很好,頁無法解決一些問題,比如文字大小。 2、解決思路 我們

android螢幕的全攻略3-動態獲取手機螢幕寬高及動態設定控制元件寬高

1.獲取手機螢幕寬高: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); int screenWidth = dm.width

Android螢幕之佈局設定(二)

書接上回,我們已經瞭解了一些關於適配的一些相關概念,接下來我們會了解一下,在設定佈局時我們應該注意的地方。 儘量不去設定具體的尺寸值。 為了確保佈局適應各種尺寸的螢幕,在保證功能實現的前提下,最好不要寫死一些尺寸,這樣的硬編碼,我們最好使用“match_

Android螢幕之動態設定單個控制元件的寬高比例

前言:這個問題出現在我做平板專案的時候,需要橫排顯示一張圖片以及其他控制元件,如下圖:要求圖、文各佔一半大小,圖片的寬高比例目測是1:2。這種情況不適合把高度寫死,因為iPad的螢幕大小差異有些大,高度寫死圖片hin容易變形,因此我們就需要動態去設定這個圖片的寬高。正題:首先

html5 viewport移動屏幕

-- 必須 min 用戶 介紹 發出 tab 是否 maximum 隨著高端手機(Andriod,Iphone,Ipod,WinPhone等)的盛行,移動互聯應用開發也越來越受到人們的重視,用html5開發移動應用是最好的選擇。然而,每一款手機有不同的分辨率,不同屏幕大小,

Android 開發:(九)Android螢幕經驗談

1.名詞解釋 螢幕尺寸: 也就是我們平時所說的某某手機是幾寸屏, 比如HTC one V這款手機是3.7寸的, 這裡的寸說的是英寸(inch),國際上習慣使用的單位,1inch = 2.54cm,3.7寸指的是螢幕的對角線的長度。 螢幕解析度:

Android 螢幕之 dimens

相信做手機端的 App 的小夥伴,只要是產品稍微大一點,就會面臨螢幕適配的問題,對於適配這個問題,網上眾說紛紜,以前雖然有零零散散的看過,但是沒有實踐過,也是在最近遇到這個需求的情況下才研究了一下,現在做個記錄。 1 參考連結 http://blog.csdn.net/qq_341

Cordova 小米8留海螢幕之沉狀態列與 螢幕手機 從開始到結束 總結

 之前專案中打包的apk安裝到全面屏手機後,發現在應用下方出現了一大塊黑色區域(如:小米8),只有在系統中設定適配全面屏才能讓應用在全面屏手機中顯示正常,但是這種方式並不友好,而且有些手機廠商可能也沒有這種設定,所以還是需要我們再打包的時候就做一些相應的處理。 &l

【iOS】螢幕

螢幕適配 1、螢幕適配的發展過程: 程式碼計算frame -> autoreszing(父控制元件和子控制元件的關係) -> autolayout(任何控制元件都可以產生關係) -> sizeclass   沒有螢幕適配,直接使用frame固定子控制元件的

Anroid螢幕 - 工具篇

這篇文章主要是記錄下自己使用自動化外掛,進行簡單適配。 關於螢幕適配的相關知識可以參考  Android螢幕適配全攻略(最權威的官方適配指導) 1、使用外掛 ScreenMatch    關於ScreenMatch 使用原理,可以參考 &nb

Android中dp px sp概念梳理以及如何做到螢幕

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

螢幕(劉海屏、18:9螢幕尺寸、隱藏SystemUI)

劉海屏 薩瑞劉海屏API介面    <meta-data android:name="android.compatible_notch" android:value="true"/> 參考:https://developer.huawei.