CSS Device Adaptation 草案有關 width 的心得/問題

我後來多了解了這份草案關於視口寬度計算的部份一點，幾個心得分享一下，順便
問幾個問題。

== 心得一 ==

>> From: Rune Lillesveen <rune@opera.com><rune@opera.com>  Organization:
>> Opera Software ASA
>>   
>> "width=device-width; initial-scale=1.0; maximum-scale=1.0;
>> user-scalable=0;"
>>
>> Works in Safari because the over-constraining scale values cause the width
>> to end up at device-width anyway. This would not have worked in Safari or
>> Opera: "width=device-width; user-scalable=0;".

一開始看不懂這一段，後來發現到把規範上的初始視口（initial viewport）想成
是大約就是視窗的那個尺寸（device-height x device height）有幫助了解，我
一開始一直以為在行動裝置上初始視口的寬度是 980px，後來才發現不是。

總之，這裡的流程（Safari、Opera）為下：

1. width 一開始會根據 meta-viewport 裡 width 跟 height 的解析規則[1]

  # 4. Other keywords and unknown values translate to 1px  

被設為 1px，因為關鍵字 "width;"（注意，不是 "width"）未定義

2. 在約束過程[2]中

  # 10. If zoom or max-zoom is not ‘auto’, set width = MAX(width,
(initial-width / MIN(zoom, max-zoom)))

因為 initial-scale 是對到 zoom，maximum-scale 是對到 max-zoom（這裡非常
神奇的是解析規則支持 "1.0;" 這樣的鬼東西），所以 width = Max(1px,
(initial-width / MIN(1.0, 1.0)) = initial-width = device-width 回到作者
想要的值，但是這是意外。

[1]
http://dev.w3.org/csswg/css-device-adapt/#translation-into-viewport-properties
[2] http://dev.w3.org/csswg/css-device-adapt/#constraining-procedure

當沒設置 zoom 的時候（比如說 "width=device-width; user-
scalable=0;"），width 就停留在 1px。

我只能說 ebay.com, microsoft.com 的這些前端互抄 "width=device-width;
initial-scale=1.0; maximum-scale=1.0;
user-scalable=0;" 而沒有踩到 iPhone 跟 Opera 的雷實在是..... 太神奇了

== 心得二 ==

一開始不曉得行動裝置預設的視口（viewport）的 980px 是怎麼來的，後來才發
現是在預設的 UA 樣式表[3]上。但是這不是桌上瀏覽器用的 UA 樣式的。

[3] http://dev.w3.org/csswg/css-device-adapt/#ua-stylesheet

== 問題一 ==

比起 "width: device-width; "，看起來 "width: 100%;" 是一個比較桌上/行動
兼用的值，畢竟是視窗的寬度而不是螢幕的寬度，這種想法對嗎？我感覺有的確是
有一些桌上網頁是以固定視口的角度去設計的...

假設在某裝置上的會有網頁視窗的寬度會改變的情形，你會覺得穩定的 "width:
device-width; " 跟隨視窗大小改變的 "width: 100%;" 哪個比較好？

== 問題二 ==

該不該有一個 "width: window-width;"？目前初始視口沒有一個很完整的定義
（所以我一開始才會錯認行動裝置的初始視口寬是 980px），我也記得 Firefox
在視窗小到一個地步之後視口就不會在隨視窗變小而變小了。"width:
window-width;" 會不會是一個比較牢靠的值？還是 "width: 100%;" 已經夠了。

== 問題三 ==

第三章[4]開頭這裡，Mozilla 的 David Baron 有一個評論：

  # "dbaron: The question is, what does this do on the desktop browser?
(And what's a desktop browser)". Need to say that a "desktop" browser
typically have no UA styles, as opposed to the UA stylesheet outlined
for current mobile behaviour, and that no UA styles for @viewport will
give "desktop" behaviour per default (actual viewport is initial viewport).

「桌上」行為是不是就是 "width: 100%"？不過不管怎麼樣我同意如何定義「桌上
瀏覽器」是一個大難題，總不能說不在 Android 跟 iOS 上跑的就是桌上瀏覽器吧。

[4] http://dev.w3.org/csswg/css-device-adapt/#the-viewport

另外，我沒什麼行動網頁的經驗，一般在點兩下放大的時候視口大小是會改還是不
會改，這裡需要什麼 CSS 的調節機制嗎？


此致

呂 康豪（Kenny）, 中文興趣小組W3C連絡人
Google+: https://plus.google.com/112088462407783855918/posts
新浪微博: http://t.sina.com.cn/1950042164

Received on Monday, 24 October 2011 03:24:37 UTC