亚洲欧美成人综合一区_国产精品一区二区无码_亚洲风情偷拍区_成?人免费无码视频在线看

在線客服與您一對一交流
當(dāng)前位置: 主頁 > 行業(yè)新聞 > IT技術(shù) >

HTML5手機網(wǎng)站開發(fā)頁面寬度解決方案

    相信大家都知道,現(xiàn)在市面上手機的屏幕尺寸多種多樣,2.8寸、3.0寸、3.2寸、3.5寸、4.0寸、4.2寸、4.5寸等等,隨之而來的手機分辨率也千差萬別,有240*320像素、320*480像素、480*800像素、640*960像素等等,其中480*800像素和640*960像素是主流的,但智能手機的發(fā)展速度大家有目共睹,隨著手機的發(fā)展,不同尺寸的手機會陸續(xù)出現(xiàn),這就給手機網(wǎng)站的開發(fā)帶來非常大的麻煩,如何讓自己的手機網(wǎng)站在不同尺寸的手機都能完美展示,手機網(wǎng)站的設(shè)計稿要設(shè)計成多大才合適?
    只要稍微有關(guān)注互聯(lián)網(wǎng)的,應(yīng)該都知道HTML5,HTML5的強大毋庸置疑,因為PC網(wǎng)站的瀏覽器更新太困難,導(dǎo)致兼容性不好,所以HTML5的新技術(shù)在PC網(wǎng)站很難實行,但是手機瀏覽器更新非常迅速,基本可以完美支持HTML5+CSS3。這里方維網(wǎng)絡(luò)介紹HTML5的一個viewport功能如何讓網(wǎng)站適應(yīng)不同分辨率的手機瀏覽器。
    viewport語法如下:
01  <!-- html document -->
02  <meta name="viewport"
03      content="
04          height = [pixel_value | device-height] ,
05          width = [pixel_value | device-width ] ,
06          initial-scale = float_value ,
07          minimum-scale = float_value ,
08          maximum-scale = float_value ,
09          user-scalable = [yes | no] ,
10          target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
11      "
12  />
width
控制 viewport 的大小,可以指定的一個值或者特殊的值,如 device-width 為設(shè)備的寬度(單位為縮放為 100% 時的 CSS 的像素)。
height
和 width 相對應(yīng),指定高度。
target-densitydpi
一個屏幕像素密度是由屏幕分辨率決定的,通常定義為每英寸點的數(shù)量(dpi)。Android支持三種屏幕像素密度:低像素密度,中像素密度,高像素密度。一個低像素密度的屏幕每英寸上的像素點更少,而一個高像素密度的屏幕每英寸上的像素點更多。Android Browser和WebView默認屏幕為中像素密度。
下面是 target-densitydpi 屬性的 取值范圍
device-dpi –使用設(shè)備原本的 dpi 作為目標(biāo) dp。 不會發(fā)生默認縮放。
high-dpi – 使用hdpi 作為目標(biāo) dpi。 中等像素密度和低像素密度設(shè)備相應(yīng)縮小。
medium-dpi – 使用mdpi作為目標(biāo) dpi。 高像素密度設(shè)備相應(yīng)放大, 像素密度設(shè)備相應(yīng)縮小。 這是默認的target density.
low-dpi -使用mdpi作為目標(biāo) dpi。中等像素密度和高像素密度設(shè)備相應(yīng)放大。
<value> – 指定一個具體的dpi 值作為target dpi. 這個值的范圍必須在70–400之間。
1  <!-- html document -->
2  <meta name="viewport" content="target-densitydpi=device-dpi" />
3  <meta name="viewport" content="target-densitydpi=high-dpi" />
4  <meta name="viewport" content="target-densitydpi=medium-dpi" />
5  <meta name="viewport" content="target-densitydpi=low-dpi" />
6  <meta name="viewport" content="target-densitydpi=200" />
為了防止Android Browser和WebView 根據(jù)不同屏幕的像素密度對你的頁面進行縮放,你可以將viewport的target-densitydpi 設(shè)置為 device-dpi。當(dāng)你這么做了,頁面將不會縮放。相反,頁面會根據(jù)當(dāng)前屏幕的像素密度進行展示。在這種情形下,你還需要將viewport的width定義為與設(shè)備的width匹配,這樣你的頁面就可以和屏幕相適應(yīng)。
initial-scale
初始縮放。即頁面初始縮放程度。這是一個浮點值,是頁面大小的一個乘數(shù)。例如,如果你設(shè)置初始縮放為“1.0”,那么,web頁面在展現(xiàn)的時候就會以target density分辨率的1:1來展現(xiàn)。如果你設(shè)置為“2.0”,那么這個頁面就會放大為2倍。
maximum-scale
最大縮放。即允許的最大縮放程度。這也是一個浮點值,用以指出頁面大小與屏幕大小相比的最大乘數(shù)。例如,如果你將這個值設(shè)置為“2.0”,那么這個頁面與target size相比,最多能放大2倍。
user-scalable
用戶調(diào)整縮放。即用戶是否能改變頁面縮放程度。如果設(shè)置為yes則是允許用戶對其進行改變,反之為no。默認值是yes。如果你將其設(shè)置為no,那么minimum-scale 和 maximum-scale都將被忽略,因為根本不可能縮放。
所有的縮放值都必須在0.01–10的范圍之內(nèi)。
例:
(設(shè)置屏幕寬度為設(shè)備寬度,禁止用戶手動調(diào)整縮放)
<meta name="viewport" content="width=device-width,user-scalable=no" />
(設(shè)置屏幕密度為高頻,中頻,低頻自動縮放,禁止用戶手動調(diào)整縮放)
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

相關(guān)文章:

  • 在網(wǎng)站建設(shè)過程中,建站人員經(jīng)常會忽略一些安全問題而導(dǎo)致后期網(wǎng)站遭受攻擊。所以,我們在建站的時候,就需要注意避免這些問題,以保證網(wǎng)站的安全運行。西安做網(wǎng)站推薦閱讀...

  • 隨著網(wǎng)絡(luò)營銷競爭日益激烈,少不了百度競價推廣,短期內(nèi),特別是新站的時候,更需要競價的支撐,才能最快的獲取網(wǎng)絡(luò)營銷效果,如今百度競價受到越來越多的企業(yè)重視,可以說百...

  • 網(wǎng)站建設(shè)從制作到運行都要經(jīng)過很多過程,網(wǎng)站建設(shè)能否做好,其實要和網(wǎng)站優(yōu)化同步進行,在網(wǎng)站建設(shè)中,站長的服務(wù)還是在客戶自己的手中。西安做網(wǎng)站推薦閱讀 網(wǎng)站優(yōu)化常識:如...

  • 西安微網(wǎng)站建設(shè),西安做網(wǎng)站推薦閱讀 西安競價托管:如何做好競價推廣 如何優(yōu)化百度的競價排名?這個問題一直以來都困擾著筆者和很多競價員。西安劍鋒網(wǎng)絡(luò)對此給了筆者以下幾點...

  • 劍鋒網(wǎng)絡(luò)1月6日訊,一、確定建站目標(biāo) 網(wǎng)站建設(shè)流程第一步,先為網(wǎng)站設(shè)立一個目標(biāo),這個目標(biāo)不能是抽象化、簡單的。比如:我想做一個很漂亮的網(wǎng)站、我想做個功能很強大的網(wǎng)站。...

  • 先要做好西安網(wǎng)站推廣是有技巧的。 1、關(guān)頭詞要分不太懂自己公司的商品或辦事的潛伏客戶會搜哪些關(guān)頭詞?、一般懂自己公司的商品或辦事的潛伏客戶會 搜哪些關(guān)頭詞?、很是懂自己...

  • 網(wǎng)站建設(shè)中單頁面的設(shè)計 曾經(jīng)一度風(fēng)靡的暴利類型的單頁淘寶客網(wǎng)站現(xiàn)在開始在互聯(lián)網(wǎng)上逐漸消失,這不是因為單頁網(wǎng)站的優(yōu)勢不顯著,而是因為這些淘寶客網(wǎng)站過多重視短期的利益,...

  • 分享四大注意點可避免網(wǎng)站優(yōu)化過度第一點、關(guān)鍵字切勿堆砌過度在優(yōu)化網(wǎng)站前就要確定好需要優(yōu)化的關(guān)鍵字,然后再title、網(wǎng)站全體頁面上進行恰當(dāng)?shù)慕M織,而不是盲目的堆砌許多關(guān)...

  • 在當(dāng)下,網(wǎng)站對于企業(yè)來說,似乎成了必須品。在互聯(lián)網(wǎng)中,大大小小的網(wǎng)站已經(jīng)有了上億個,但不是每個網(wǎng)站都能達到他原來想要達到的要求。在網(wǎng)站建設(shè)中,總是會遇到大大小小的...

  • 1、尊重用戶的體驗,注意鏈接的相關(guān)性,內(nèi)部鏈接不要太過與泛濫。相關(guān)性高的鏈接有助于提高搜索引擎收錄,并且有助于提升用戶體驗,增加用戶的黏性,進而提升網(wǎng)站的瀏覽量。如...

  • 公司:西安蟠龍網(wǎng)絡(luò)科技有限公司
  • 聯(lián)系人:張經(jīng)理
  • 手機/微信:
  • Q Q: 點擊這里給我發(fā)消息
  • 地址:西安市雁塔區(qū)唐延南路11號逸翠園i都會