手機版網頁製作記錄

html5標籤查詢:

  1. html5doctor.com

html5與html4的差異:

  1. www.w3.org

viewport寫法:

viewport的作用是告訴瀏覽器,目前裝置有多寬(或多高),以便在縮放時有個基準。尤其當設定頁面寬度需自動調整時,如寬度100%或螢幕由垂直轉為水平,viewport大小是一個根據。

語法:

viewport有以下屬性可設定:

  1. width:[數字] 或 device-widt;hwidth通常設為device-width,用意是適應各家裝置的大小,這樣寫CSS時就能放心的把版面寬度設為100%
  2. height:[數字] 或 device-height
  3. initial-scale:最小0.25,最大5
  4. minimum-scale:最小0.25,最大5
  5. maximum-scale:最小0.25,最大5
  6. user-scalable:1 或 0 (yes 或 no);user-scalable的實際行為就等於zoom,zoom=1可以配合行動版專用網頁的設定,剛剛好填滿畫面,不過桌機版網頁超出畫面是必然的


當手機轉方向時所產生的問題:

文字變大變小

html {-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */}

或者

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
html {-webkit-text-size-adjust: none;}
}
又或者
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

裝置轉向時Orientation

ipad上可以利用

/* Portrait */
@media screen and (orientation:portrait) {
/* Portrait styles */
}

/* Landscape */

@media screen and (orientation:landscape) {
/* Landscape styles */
}

iphone上可以利用

/* Portrait */
@media screen and (max-width: 320px) {
body { opacity: 1; }
}

/* Landscape */
@media screen and (min-width: 321px) and (max-width: 480px) {
body { opacity: 0; }
}

當position:fixed遇上safari3/4時的慘劇:

這個讓人蛋疼的問題到ios5的版本才解除(請看慘劇),解法大概有以下幾種:

  1. Sencha Touch
  2. YUI Scrollview
  3. iScroll

網路上的原文:DOCTYPER

bakcground-size

範例

css3懶人漸層產生器:

  1. gradients.glrzad.com(推!)
  2. www.colorzilla.com(也推!)
  3. westciv.com
  4. css3pie.com/
  5. http://www.css3.me/

About this entry