1、為重新開發(fā)網(wǎng)頁向Web應用程序進軍如第2章所述，基于交互。在第二部分中，的Web應用程序使用戶能利用因特網(wǎng)的互聯(lián)性，并與其他用戶進行介紹一些工具，你可以憑借自己的Web技術(shù)使用這些工具創(chuàng)建與SDK程序同樣復雜的網(wǎng)頁。但在此之前，以使用這些工具為先來了解一些基礎知識在編寫全新的用戶改善已有網(wǎng)頁。Web應用程序之前，你可本章的知識都是非?；A的，它們將成為后續(xù)所有有關(guān)Web章節(jié)的基礎。它們還有更廣的適用范圍，因為你可以將它們應用于可在其他的網(wǎng)頁。上查看的網(wǎng)頁，而不僅僅是用戶使用在第二部分中，于將在下面7章中偶爾會深入依賴3個基本的Web開發(fā)工具：HTML、CSS和JavaScript。每個工具對的

2、庫和工具都非常重要。并且，假定你已經(jīng)具備了這方面的堅實基礎。編程語言，對于這些情況，使用開發(fā)的示例。但是，你應該能夠在更加動態(tài)的Web編程中將描述的技巧應用于任何語言。蘋果公司文檔和Web應用程序蘋果公司在其 上提供了許多內(nèi)容全面的文檔。這些資源通常更類似于百科全書，而不像本書采用的 模式。由于它們更加全面，因此， 在完成對某個 的介紹之后經(jīng)常會讓你參考蘋果公司的文檔。蘋果公司的文檔可以分為兩種類型：Web文檔和SDK文檔。要 它們，你需要 蘋果公司的Apple Developer Connection（ADC）計劃該計劃是免費（但也為感 的人提供了高級會員服務）。Web文檔。Web文檔的地址

3、是 HYPERLINK http:/d/ http:/d/webapps/。最重要的文檔是“Safari Web第3章 本章內(nèi)容理解視區(qū)創(chuàng)建友好的頁面創(chuàng)建優(yōu)化的頁面3.1視區(qū)23Content Guide for”，其中包含大量關(guān)于為開發(fā)網(wǎng)頁的通用信息，本書涵蓋了其中的大部分內(nèi)容。你還可以找到關(guān)于WebKit和Dashcode的詳細信息，這兩個開發(fā)包將分別在第6章和第7章中。SDK文檔。SDK文檔的地址是 HYPERLINK http:/d/ http:/d它們。蘋果公司還提供了第三種可用的文檔Mac Dev文檔。但這超出了/。在第10章中深入開發(fā)的范圍。重新開發(fā)頁面之前，還將為你閱讀第8章做

4、一些鋪墊。你將了解如何在在開始為3Mac上設置本地Web服務器，以及如何使用各種客戶機進行調(diào)試。這些知識對于閱讀后面關(guān)于 Web開發(fā)的任何章節(jié)都非常有用。視區(qū)Web任務中最基本的概念都是視區(qū)。為3.1任何編寫的每一個頁面都不能缺少這個部分，不論是最簡單的Web程序還是最復雜的基于Canvas的圖形Web應用程序。首先，回顧在第1章中提到過的視區(qū)的概念。如前所述，雖然的顯示分辨率達到320480（或反過來，由方向決定），但當你運行Safari時，它會將一個較大的“虛擬”窗口到該屏幕。默認的虛擬窗口（或視區(qū)）為980像素寬，然后它將按31或21的比例縮小。圖3-1展示了視區(qū)的作用，可以看到，未縮放

5、的內(nèi)容可以顯示在兩種模式的活動區(qū)域中?？梢妳^(qū)域320356980像素（縮放）可見區(qū)域480208980像素（縮放）風景模式人像模式圖3-1的視區(qū)允許在的屏幕中顯示、縮放更大的網(wǎng)頁如果你選擇保持默認的視區(qū)大小，則圖3-1反應了網(wǎng)頁呈現(xiàn)給用戶的方式。在人像模式中，事物的呈現(xiàn)方式極為貼近你的預期，視區(qū)大致為方形，不超過1090像素的任何畫面都可以正常顯示在屏幕中。在風景模式中，用戶只能看到一個經(jīng)過很大縮減的頁面，它只有靠前的425像素能顯示在屏幕中。幸運的是，你不會受困于默認的視區(qū)大小。你可以通過兩種方式來改變它。首先，任何托管在.mobi域中的網(wǎng)頁和任何包含移動XHTML標記的網(wǎng)頁都會自動使用32

6、0像素的視區(qū)。其次，你可以有目的地修改任何網(wǎng)頁的視區(qū)，方法是引入新視區(qū)元標記。你可以通過在整個站點中加載的1090像素（縮放）425像素（縮放）24第 3 章為重新開發(fā)網(wǎng)頁默認頭部來實現(xiàn)此目的。將視區(qū)的寬度定義為500之后，網(wǎng)頁首先會顯示為500像素寬度，然后才縮放到上。這是最簡單的視區(qū)命令，可能也將是你最常使用令。屏幕剩余就是：為什么使用視區(qū)？目的是什么？大多數(shù)情況下，你可能完全不需要使用視區(qū)。如果你在某臺上打開網(wǎng)頁，并且沒有顯示過小的內(nèi)容，那么沒有問題。如果你發(fā)現(xiàn)有些內(nèi)容非常?。ㄓ烧军c寬度或本地頁面的內(nèi)容所造成），那么就需要在網(wǎng)頁中添加一個視區(qū)標記。同樣，如果你發(fā)現(xiàn)頁面在風景模式中顯示得非

7、常糟糕（由于活動區(qū)域太?。?，那么也需要添加視區(qū)。一般而言，你應該將視區(qū)看作是一個機會。在桌面瀏覽器中，你不知道用戶會打開多大的瀏覽器窗口，但是在上你可以精確控制其大小。站點寬度視區(qū)更改和本地視區(qū)更改的原因略有不同，因此它們分別需要稍微不同的解決方案。3.1.1更改整站視區(qū)兩個可能導致你在全局頭部文件中更改整站視區(qū)：圖形太小或字體太小。圖形是最常見。如果你使用它們進行導航或表述任何其他關(guān)鍵信息，那么你可能會遇到這種問題，因為它們在31的比例下可能無法輕易辨認。字體問題通常由CSS font-size屬性中使用的絕對值造成。顯然，小字體在屏幕會變得更加小。較好的解決方法是修改你的CSS文件，這將在

8、稍后采用此方法，則需要修改整站頭部。通常，確定整站視區(qū)的大小需要花一些功夫。你必須選定一個特定的值來確定圖形或字體的大小。如果有整站導航欄，那么你可能會使用其寬度作為視區(qū)大小。在沒有任何特殊問題的情況下，將視區(qū)大小設置為480比較合適。無論是在人像模式（32比例）還是風景模式（11比例）中，它都具有很好的可讀性。小于480的值可能效果就沒這么理想了，并且絕對不應將視區(qū)寬度。但如果你由于某些原因無法設定為320以下。超過極限可能會導致網(wǎng)頁，并且無法體現(xiàn)屏幕出色的清晰度。的目標是記住顯示的內(nèi)容比桌面瀏覽器要小，然后在此限制中找到一個很好的平關(guān)于WebKit視區(qū)命令是WebKit的一部分，后者是一個

9、開源應用瀏覽器引擎，它提供了對 Web標準的擴展。WebKit被許多瀏覽器開發(fā) 所使用，包括Apache和 開發(fā) 。更重要的是（至少對于 設計 來說），它是蘋果公司的Safari的基礎。這意味著，WebKit的許多擴展（在 ernet Explorer和Firefox等瀏覽器中尚不可用）都可以在 上運行。 Web開發(fā) 因此可以使用大量手勢和變換，這些完全基于Web的設計賦予他們強大的能力。在下一章中 WebKit的許多可能。 已經(jīng)在這里介紹了一個WebKit元素，即視區(qū)，因為它對于 的、與 相關(guān)的Web設計都 ，無論是頁面的重新開發(fā)還是功能全面的Web應用程序。3.1視區(qū)25衡點。3.1.2更

10、改局部視區(qū)調(diào)整全局視區(qū)是確保網(wǎng)頁在上可讀的第一個步驟。但是，你也會發(fā)現(xiàn)一些單獨的頁面無法正常顯示。這種情況最有可能出現(xiàn)在顯示單獨圖形和applet的頁面上。蘋果公司的開發(fā)頁面提供了一個Sudoku applet的示例，它在頁面上的顯示過小，因為它的寬度只有幾百像素。一些設計者在打開顯示書籍封面的頁面時也遇到了問題，其寬度最大只能放大到450像素。在這兩種情況下，使用980像素的默認視區(qū)時，各元素都出現(xiàn)在常小并且浪費四周的空間。針對此問題的一個解決方案是，將各相關(guān)頁面的視區(qū)的寬度設置為與applet或圖形的已知（或屏幕的左上方，顯示得非3計算得出的）寬度相同。另法是在元標記中使用特殊的devic

11、e-width常量，如下所示：device-width是開發(fā)可以在較復雜站點的視區(qū)元標記中添加的若干高級元一。3.1.3視區(qū)屬性和常量共支持6個視區(qū)屬性，如表3-1所示。寬度（width）是唯一在大多數(shù)網(wǎng)頁中都使用的視區(qū)屬性。表3-1iPhone支持6個視區(qū)屬性，它們作為視區(qū)元標記的一部分用于控制網(wǎng)頁在上的顯示方式屬性默 認 值最小值最 大值常量height22310000device-height, device- width device-height, device- width需計算width98020010000initial-scale minimum-scaleum-scaleu

12、ser-scalable1.00.251.6Yesminimum-scale00N/Aum-scale10.010.0N/Ayes, no已經(jīng)了height和width屬性的工作原理：它們假設虛擬窗口的高度或?qū)挾葹橹付ㄖ?，然后適當縮放它，以便在上顯示。注意，device-width常量（已經(jīng)遇到過）與device-height成匹配關(guān)系；你可以決定是否希望網(wǎng)頁填滿顯示的寬度，或它的高度。其他4個屬性全部控制縮放的方式。initial-scale確定初次查看頁面時的縮放比例。默認值1會讓網(wǎng)頁適合中，使內(nèi)容對于屏幕。你可以將它設置為比1小的值，讓頁面立即縮放到最左側(cè)的列用戶更具有可讀性。但是在使用

13、此技巧時應該格外注意，因為用戶只能閱讀頁面的一部分內(nèi)容。user-scalable確定是否允許用戶使用掐捏操作進行縮放。如果設置為no，則不允許縮放。如果設置為默認的yes，則用戶最小可縮放到minimum-scale值，最大可縮放到um-scale值。通常，在重新開發(fā)網(wǎng)頁時不需要修改最后這三個值，因為網(wǎng)頁只關(guān)注用戶查看頁面的方式。但是，如果有很好的UI原因要控制可伸縮性，或者如果你認為頁面在特定比例下特別難看，那么26第 3 章為重新開發(fā)網(wǎng)頁可以選擇修改它們。另一方面，你或許應該關(guān)閉網(wǎng)頁的縮放功能，因為它們是專門針對在上進行查看而開發(fā)的程序。注意，你可以在一個元標記中設置多個值，并使用逗號或

14、分號來分隔它們：Web開發(fā)中一個重要技巧。你會發(fā)現(xiàn)，在接下來的幾章會多次談到視區(qū)它是3.2實現(xiàn)“友好的”網(wǎng)頁即使重新開發(fā)最簡單的網(wǎng)頁也需要讓它成為“友好的”，這面的章節(jié)中給出了簡工作，將已有網(wǎng)頁轉(zhuǎn)換要定義。簡單來講，此概念需要你花一天左右的時間來完成最簡單的為在上色的網(wǎng)頁。友好的頁面（以及任何基于的網(wǎng)頁）的基礎就是良好的視區(qū)。領(lǐng)悟了這一點之后，你還應考慮頁面開發(fā)技術(shù)以及確保頁面外觀精美的設計技巧。要實現(xiàn)友好的頁面，更多的任務應是修復問題而不是展現(xiàn)的優(yōu)點。3.2.1避免缺少雖然人們經(jīng)常將功能描述為功能全面的Web瀏覽器，但它并非如此。特別是，你不能特定的第插件，你還會發(fā)現(xiàn)許多事件在上都不可用。如

15、果可能，應盡量避免使用這些插件和事件。在創(chuàng)建全新的網(wǎng)頁時，這相當容易（下一章討論）。但是，在重新開發(fā)已有網(wǎng)頁時，你會發(fā)現(xiàn)替換該功能是不可能的。雖然如此，知道頁面遇到問題的原因也是很重要的。1缺少的技術(shù)在第1章中，提到了在中無法使用的一些最著名的第技術(shù)：Flash和Java。但是，你可能還會遇到其他一些不受支持的技術(shù)。表3-2列出了其中最重要的一部分。到本書時，表3-2中列出的不受支持的技術(shù)可能會有不同。處理第技術(shù)的最好方法是經(jīng)常檢查它們。表3-2 雖 些第瀏覽器本身是功能全面的，但目前尚不支持一技術(shù)，下面列出了其中最重要的一部分技術(shù)注解Flash在某個時候提供對Flash編程語言的支持廣受期待

16、，但蘋果公司Canvas專為動畫提供了一些較差的替代功能，詳見第4章和第6章未作任何表態(tài)。同時，WebKit和JavaSun在2008年宣布了在上支持Java的計劃，但這與蘋果公司在SDK程序方面的限制相。目前還沒有關(guān)于何時或是否提供Java支持的說法可伸縮的矢量圖形未受支持。Canvas提供了一個很好的替代功能，詳見第6章可擴展樣式表語言轉(zhuǎn)換（Extensible Stylesheet Language Transformations）未受支持SVG XSLTWML的Safari不是經(jīng)過刪減的上一代瀏覽器，因此無線標記語言（Wireless Markup Language）基本上無關(guān)緊要。但

17、是，XHTML移動配置文檔在.mobi域中是有效的3.2實現(xiàn)“友好的”網(wǎng)頁27如果未檢測到相應技術(shù)，則理想情況應該在另一個頁面中向用戶顯示不同格式的相同信息。如果無法實現(xiàn)這一點，你至少應該在另一個頁面中解釋為何不能顯示內(nèi)容。僅僅顯示不能正常運行的頁面或許是避開這些第的做法。包之后，大多數(shù)頁面都可以在你的瀏覽器中正常顯示。如前所述，DOM、CSS和JavaScript都是支持的高級Web技巧。但是，關(guān)于JavaScript和事件能正常運行的說法需要加上一個大大的星號。2缺少的事件遺憾的是，事件無法如你所愿在上正常運行。這很大程度上與第1章中過的一個獨特的特性有關(guān)，即的輸入設備。更具體地講，記住手

18、指不是鼠標這一點很重要。3由于在任何時間手指可能在也可能不在屏幕上，因此網(wǎng)頁會突然沒有狀態(tài)。你可以不再依賴這些假設鼠標始終在A、B兩點之間移動的事件。事件的無狀態(tài)性導致兩類傳統(tǒng)事件在上失效：拖動和懸停。因此，你不能再使用單擊和拖動操作（因為區(qū)域上方（因為它不能）。使用該手勢來執(zhí)行滾動），并且你不能再測試鼠標何時移動到某缺少這些事件將影響你使用CSS和JavaScript進行編程的方式。在CSS中，最大就是懸停的方式，這當然不會再出現(xiàn)，它對于網(wǎng)頁來說顯然不是大問題。在JavaScript中，輸出中的這些差異導致一些具體事件的運行方式發(fā)生變化，或者完全不同，如表3-3所示（但還建議，了解是否有的變

19、化）。表3-3 并非所有JavaScript事件在上都有效，因此其選項面板比傳統(tǒng)瀏覽器更加受局限有效事件更改的事件無效事件form.onreset formfield.onblur formfield.onchange formfield.onclick formfield.onfocus formfield.onmouseup textarea.onkeydown textarea.onkeypress textarea.onkeyup window.onloadformfield.onmousedown formfield.onmousemove formfield.onmouseout

20、formfield.onmouseover window.onscroll.onkeydown.onkeypress.onkeyup form.onsubmit formfield.ondblclick formfield.onmouseenter formfield.onmouseleave formfield.onselect window.oncontext window.onerror window.onresize經(jīng)過更改的JavaScript事件受到的為頭痛。最多，因為你會為它們看上去能正常使用的假象感到極formfield.onmousedown不常發(fā)生。與桌面瀏覽器不同，onm

21、ousedown事件要等到onmouseup事件發(fā)生之后才會觸發(fā)，因此相對而言它的作用意義不大。這正是之前類型失效的原因。的“單擊并拖放”事件formfield.onmousemove、formfield.onmouseout和formfield.onmouseover以類似的方式聯(lián)系在一起。當用戶單擊屏幕時，這三個事件始終依次發(fā)生。此外，如果用戶單擊某個可更改的元素，則formfield.onmousedown、formfield.onmouseup和formfield.onclick也會隨后發(fā)生。實際上，許多事件都沒有提供過多信息，因為它們始終一起發(fā)生。最后，window.onscroll

22、事件的運行方式有點類似formfield.onmousedown，它直到滾動28第 3 章為重新開發(fā)網(wǎng)頁完成才會出現(xiàn)。這對于一般程序員來說不太可能是一個UI問題，但它意味著你不再需要在滾動發(fā)生之前截取它。在不支持的事件中，formfield.onmouseenter和formfield.onmouseleave事件最有可能在網(wǎng)頁上引起各種問題。它們使你無法識別JavaScript中的懸停式事件。由于你不能使用這些事件類型，因此你會發(fā)現(xiàn)許多傳統(tǒng)UI都不能正常運行。剪切和粘貼就是的第一個損失。彈出菜單將成為另一個受害者，因為它們大多數(shù)都需要依賴單擊和拖動操作。針對它們也有相應的解決方法：你可以開發(fā)

23、一種新的只需單擊文本邊緣的剪切和粘貼方法，還可以開發(fā)一種新的“單擊頁更改的范圍。還會回過頭來方式的”彈出菜單方法。這已超出了此處的相對較簡單的網(wǎng)上的Web事件。在本章稍后內(nèi)容中，在研究優(yōu)化的網(wǎng)頁屏幕時發(fā)生的事件。然后，在第4章中，友好的網(wǎng)頁的第一步是解決本章強調(diào)的事時，將重點用戶觸摸或用手勢操作WebKit中引入的一些新事件。實現(xiàn)件問題，但如果你希望繼續(xù)下一個步驟并重新設計事件模型，為你提供到這些資源的。3.2.2創(chuàng)建事件再一次向展示了手指鼠標與機械鼠標之間的不同。當你考慮用戶通過何種方式選擇時，又進入了有關(guān)基本W(wǎng)eb設計的話題。它非常重要，你在第一次為重新設計網(wǎng)頁時就需要考慮這個問題。此處的

24、主要問題是，鼠標指針通常有一個1像素寬的熱點而用戶手指會占用許多個像素的寬度。因此，如果你讓彼此之間排列得很近（比如說，在基于列的導航欄中，會上下依次排列），則用戶需要放大視圖才能選擇它們。表單也是這種情況。根據(jù)設置網(wǎng)頁的方式，你可以迅速解決此問題。在列式導航欄中，你可以在之間添加一些空格，這樣它們在桌面和瀏覽器都可以非常好地顯示。對于比較復雜的設置，包括表單，你可能需要重新設計大部分頁面或者創(chuàng)建特定于的視圖，此話題將在介紹優(yōu)化時。無論何種情況，你都需要查看的重新設計來解決它們。在上是否可用，如果不可用，則應該通過一些簡單3.2.3Web 開發(fā)中的良好如果你定義了一個視區(qū)，創(chuàng)建了另一個頁面來彌

25、補缺少的Web技術(shù)，并且重新排列了靠得太近的，那么你已經(jīng)完成了網(wǎng)頁美化工作的90。但是，在完全離開此話題之前，建議你通過良好的Web實踐為你的頁面錦上添花。如果你已經(jīng)是一名經(jīng)驗豐富的Web設計者，那么你可能已經(jīng)掌握了這些要點，對于這種情況，你可以跳過去直接閱讀1好的CSS設計優(yōu)化的內(nèi)容。要提高網(wǎng)頁在不同上的可性，建議你不要在CSS中使用絕對值，而應該使用相對值。對于字體大小，使用80%和120%這樣的百分比，而不要使用10pt和12px這樣的絕對值。對于字體類型，可以使用各種fallback，并確保它們包括上可用的字體，如表3-4所示。表3-4友好的頁面，確保CSS文件在其標準支持許多字體。對

26、于中至少包括其中一個3.2實現(xiàn)“友好的”網(wǎng)頁29字體注釋包括Courier包括Helvetica Neue包括Times3（Zapfino）最后，仔細考慮如何在網(wǎng)頁上實現(xiàn)任何CSS定位。當然，絕對定位可以讓網(wǎng)頁非常美觀，但它只允許頁面以準標大小顯示這意味著在上，你將強制使用默認的視區(qū)大?。ㄈ?80像素），而不能在較小的視區(qū)中更好地縮放字體和圖形。此外，在表3-5中列出了使用CSS定位的建議。上的定位有時會難以預料。表3-5使用CSS定位元素有四種方法但是，不要期望它們在上能獲得相同的效果類型定義注釋靜態(tài)值相對值絕對值在普通頁面流中進行定位相對普通流進行定位相對包含塊進行定位默認行為適用于，并且

27、是混合設備環(huán)境中較復雜布局的首選方法適用于特定于的樣式表，但如果用于布局整個頁面，則不同設備間的大小差異更容易造成問題固定值相對瀏覽器窗口進行定位在上不受支持此處最令人吃驚的地方是固定值定位不受支持。這是因為，蘋果公司發(fā)現(xiàn)它與新的縮放網(wǎng)頁的范型不融合。固定元素在引入掐捏式縮放后就失去了意義。但是，如果你依賴于固定值定位，那么可以使用絕對值定位來模擬它。這是一個標準的Web技巧，但此處不會深入它：你只需創(chuàng)建一個大小的，然后使用絕對定位將另一個固定在這個頂級的底端（或頂端）。稍后，友好的”轉(zhuǎn)換為“2好的表格和列如何通過創(chuàng)建全面的、優(yōu)化的”，并會稍微在上使用的CSS文件，將網(wǎng)頁從“一下CSS。在過去

28、的十年中，基于列的表格已成為Web設計的實際部分。此類設計對于的重要性是前所未有的，因為用戶可以使用的雙擊特性放大到特定的列。雖然這通常不需要額外的開發(fā)工作，但細心的開發(fā)能確保針對用戶對列進行了優(yōu)化。首先，這意味著你的網(wǎng)頁中應該包含一些列。你可能已經(jīng)做到了這一點。其次，擁有列之后，確保這些列在邏輯上與頁面中的不同類別的內(nèi)容相匹配，這點非常重要。舉例來說，如果你的網(wǎng)頁中包含內(nèi)容和導航，那么你可以從邏輯上將它們分成兩個不同的列。將事物混合在一起會降低列對于讀者的實用性。這可能會讓你重新思考在表格中使用浮動表格或表格。舉例來說，讓一篇文章顯示在頁面的多個列中可能不是很好的做法，因為這會30第 3 章

29、為重新開發(fā)網(wǎng)頁迫使用戶不停地縮小視圖、放大視圖，然后還要返回查看全圖。最后，用戶一次可能只能查看頁面上的一列，這一點也非常重要。這意味著，你需要格外注意用戶閱讀到最后一列時會發(fā)生什么。因此，你可能希望在列的底部添加某種形式的導航功能。3.2.4解決常見問題在如何使網(wǎng)頁更加“友好化”的最后，歸納常見問題的解決方法以及提供最佳實踐，如表3-6所示。然后，如果你遇到了任何特定的的所有建議。首先，來看看問題，請參見以下各節(jié)?，F(xiàn)在，來看看未遵循所有這些最佳實踐（或者遵循了最佳實踐）會遇到哪些問題。1圖形太小這是在320像素屏幕中查看980像素窗口時出現(xiàn)的一個典型的視區(qū)問題?？梢允褂靡晠^(qū)解決該問題，但還列

30、出了其他一些可能的方法。降低視區(qū)的大小，使它的范圍處于480640之間。將圖形替換為相應的文本，尤其是當你計劃使用圖形進行導航時。將圖形放置在僅用于顯示圖形的子頁面中，且用戶可以通過單擊操作進入該頁面。確保子頁面以device-width寬度顯示圖形。使用initial-scale視區(qū)屬性放大到包含圖形的列。表3-6 讓你的網(wǎng)頁“友好化”可能需要花費幾個小時的時間，但其結(jié)果是顯著改善用戶的用戶體驗。下面提供了一些可以改戶頁面的最佳實踐，它們?nèi)繗w納自第1章和第3章實踐解釋使用視區(qū)使用相對值確定你的網(wǎng)頁將支持的虛擬瀏覽器的大小，并通過視區(qū)命令鎖定該值無論你是在編寫CSS、布局表格還是在執(zhí)行其他任

31、務，應始終使用相對值，而不是絕對值盡量使用列對頁面進行布局，并確保這些列與網(wǎng)頁上的邏輯數(shù)據(jù)相匹配使用列 查看你的使用事件時應留神不要在希望用戶的網(wǎng)頁上使用Flash、Java或其他不受支持的第客戶端記住一些特定的事件在動”或懸停事件上是不可用的。不要在網(wǎng)頁上使用“單擊和拖加速根據(jù)20世紀90年代的經(jīng)驗，創(chuàng)建更快、更輕便的網(wǎng)頁，從而能夠在EDGE和3G網(wǎng)絡上快速加載它們在之間放置一些空格，使用戶能夠方便地用手指單擊它們分離避免可滾動的frameset由于欄功能上缺少滾動欄，因此frameset（可以在桌面上單獨滾動）為提供了子使用文字，而非不要使用僅重復文字內(nèi)容的圖形，因為它們會降低加載速度，并

32、且在可能會非常小上的顯示遵循標準的最佳實踐雖然認為上一代移動產(chǎn)品的最佳實踐已經(jīng)過時，但你仍然應該遵循較為通用的基于Web的最佳實踐。確保你的網(wǎng)頁有效且簡潔，并為所有用戶提供最出色的體驗2文字太小這通常也是與視區(qū)相關(guān)，但可能沒有圖形問題那么常見，因為Web客戶端已經(jīng)在嘗試3.3實現(xiàn)“優(yōu)化的”網(wǎng)頁31調(diào)整字體來確保文字大小合適。下面給出了一些可能的解決方法。降低視區(qū)的大小，使它處于480640的范圍之間。調(diào)整CSS，使用相對值代替絕對值。使用initial-scale視區(qū)屬性放大到存放文本的列。注意，如果要突出頁面的你可能希望采用此方法。內(nèi)容，3列太大與其說這是由其他原因造成，倒不如說它是一個已有

33、。你在嘗試降低視區(qū)的大小時（為了解決之前的某個問題）可能會遇到此問題，并且你會發(fā)現(xiàn)列方案如下?？s小。解決3使用相對數(shù)值（如50）定義列寬度，而不要使用絕對數(shù)值（如750）。減小任何可能過度占用列寬的的大小。舉例來說，如果你在運營一個，并且允許用戶 整它們。允許較大的，那么你可能需要限制用戶可以的的大小，或者動態(tài)地重新調(diào)擴展到鄰近的列中。如果你使用表格，則可以使用colspan屬性來完成此操作。舉例來說，你的頁面中可能包含一個72890的橫向，位于內(nèi)容的頂部。對于桌面頁面來說，這種布局可能沒什么問題，但如果你使用較小的視區(qū)，則需要將該擴展于頁面中。除了設置的colspan屬性，你還需要將視區(qū)的i

34、nitial-scale屬性設置為小于1.0的某個值，這將保證的右側(cè)內(nèi)容不顯示在你的屏幕上。3.3實現(xiàn)“在上一節(jié)中，目標是解決問題，并向優(yōu)化的”網(wǎng)頁了如何通過最少的重新開發(fā)工作來美化用戶提供與桌面用戶相同的體驗。上的網(wǎng)頁外觀。的在本章的其余部分中，上運行的頁面。完成接下來的步驟。還沒有使用任何特定于更加廣泛地如何重新開發(fā)專門在的庫，但會探究一些僅適用于的技巧和設計方法，并且你最終會將此優(yōu)化流程應用于網(wǎng)頁開發(fā)。首先，的實際時間。需要了解用戶使用3.3.1通過USER_AGENT檢測優(yōu)化的你需要知道用戶在原理就是重新開發(fā)網(wǎng)頁，使它能在上出色運行。要開始這一過程，中瀏覽頁面的時間。為此，最簡單的方法

35、（Web設計中的通用方法）就是查看用戶委托。代碼3-1通過一個示例展示了實現(xiàn)此任務的最佳方法。代碼3-1 檢查用戶委托，獲取瀏覽發(fā)生的時間32第 3 章為重新開發(fā)網(wǎng)頁但是，在使用此方法時需要注意一些問題。首先，它可能不是蘋果公司所的方法。它最初沒有在文檔中，而是最近才添加到文檔中的，并且隨時可能發(fā)生變化。至少，你應該確保此檢測位于全局頭部文件中，以便于在未來對它進行修改。其次，它是受限的。很快便會出現(xiàn)功能與類似的其他智能的細節(jié)決定。設備。你可能希望該方法能適用于所有智能，但這將由你自己3.3.2通過 CSS 檢測根據(jù)你所使用的動態(tài)語言，你可以采用其他喜好的方法來檢測用戶正在瀏覽哪個瀏覽器。CS

36、S提供了一些方法，可用于檢測一些瀏覽器功能。特別強調(diào)這一點的原因是，該方法最初是蘋果公司唯一支持的為檢測使用所采用的方法。代碼3-2展示了CSS如何識別并應用不同的樣式表。除了受支持之外，蘋果公司的方法還會將你的小設備樣式表應用于任何查看你幕，從而確保能與未來智能設備良好地兼容。的第二種檢測方法又讓回到了第一個主要的優(yōu)化話題。如果你準備花一些時間改善（比創(chuàng)建友好所需的一天左右的時間稍長），那么CSS文件就是開始工作的正確地方。3.3.3使用 CSS 進行優(yōu)化改善網(wǎng)頁在上的可讀性的最簡單的方法就是從已有的大屏幕樣式表入手，然后創(chuàng)建一個新的幕樣式表，將一切內(nèi)容顯示得更大。如果你還沒有對本機視區(qū)大小

37、進行任何修改，請參考表3-7中提供的一些可行的建議。你的個人介上查看和檢查你的頁面?？赡軙兴煌?，最終，你需要在適當?shù)拿奖?-7 要讓網(wǎng)頁在屏幕上可讀，你應該創(chuàng)建一個新的樣式表，并在該樣式表中增加所有元素的大小元素更改增加20%30%增加23點增加20%30%增加20%30%相對值表示的字體絕對值表示的字體選擇菜單輸入框代碼3-2 使用檢測應用于樣式表3.4使用chrome33在CSS元素中，需要特別注意選擇菜單。它們是在友好或優(yōu)化的頁面上使用的非常理想的輸入類型，因為提供了對的內(nèi)置支持，這會自動彈出一個大的、易于閱讀的小。你應該盡可能地使用它們。對于基于文本的CSS元素，還需注意可以通過另

38、法來修改所有基于文本的CSS元素。這將通過-webkit-text-size-adjust屬性來完成，它是蘋果公司W(wǎng)ebKit的一部分。你可以方便地實現(xiàn)它，而不需要做額外的WebKit工作，會在下一章詳細它。3.4使用目前為止，chrome已經(jīng)提供了一些增強3的標準技巧。你已經(jīng)能獲知用戶何時在瀏覽，接下來可以為此情景編寫具體的代碼了。首先，chrome能實現(xiàn)什么樣的優(yōu)化。來看看使用標準Web技巧調(diào)整3.4.1三個欄chrome包括出現(xiàn)在頁面頂部及底部的所有元素。在各種程序上使用的chrome有許多種，但對于移動Safari Web瀏覽器來說只有三種，如表考圖1-1了解它們在屏幕上的位置。示。你

39、可能需要再次參表3-8的Safari屏幕上的布滿按鈕和輸入的不同欄chrome功能大小狀態(tài)欄URL欄底欄顯示總體狀態(tài)：網(wǎng)絡連接、電池量和當前時間32020或4802032060或4806032044或48032顯示網(wǎng)頁標題和主要的網(wǎng)頁功能：URL欄、搜索按鈕和重新載入按鈕顯示網(wǎng)頁導航功能：向前和向后、書簽按鈕和選項卡導航器表示的三個欄之間稍有不同。狀態(tài)欄是所有頁面固有的部分。它們的普遍存在可能無法引起用戶的注意，但畢竟它們在屏幕頂部占據(jù)了20像素的空間。狀態(tài)欄可以顯示為兩種顏色，黑色或灰色，需要通過SDK開發(fā)才能修改它。對于網(wǎng)頁來說，狀態(tài)欄始終為灰色。類似地，底欄緊貼著頁面的底部。它比較顯眼，

40、因為它只顯示在網(wǎng)頁上。許多Web開發(fā)都想辦法去掉它或替換它，但目前為止還沒有找到任何有效的方法。如果你希望創(chuàng)建特定于站點的底欄，則需要使用絕對定位，之前在CSS時提到過這一點。URL欄顯示在所查看的每個網(wǎng)頁的頂部，但是當用戶向下移動時，它也會隨之滾動，它占用 60像素的空間。與底欄類似，可以通過一種高級的WebKit方法來去除此chrome。你還可以使用普通的Web方法為它添加一些控制。你可以通過JavaScript中的window.scrollTo(0, 1)命令將URL后才會執(zhí)行。代碼3-3顯示了一種實現(xiàn)方法。自動從頂部移開。此命令需要等待頁面充分代碼3-3 通過JavaScript將UR

41、L欄chrome從屏幕移開34第 3 章為重新開發(fā)網(wǎng)頁添加延時功能此URL滾動器的代碼非常簡單。hideURLbar函數(shù)處理滾動操作，但它需要在頁面載入后才會執(zhí)行。使用此功能前需要注意，在使用視圖屏幕的initial-scale屬性時，結(jié)果對于用戶來說并不是完全直觀的。一方面，看到頁面載入后會突然跳動，用戶會感到迷惑。另一方面，用戶會對 URL欄的移動感到困惑，因為用戶并沒有執(zhí)行任何操作。一些開發(fā) 喜歡在屏幕的顯眼位置為用戶提供另一個60像素的空間，但是這些UI難點不能被忽略。當然，會執(zhí)行許多這樣的自動操作。當用戶旋轉(zhuǎn)時，它在兩種方向之間切換的方式與自動滾動之間沒有太大的不同。因此，用戶多次使

42、用設備后，應該會對象的方式。自動移動3.4.2Web 剪貼雖然不是chrome，但Web剪貼是移動Safari為你提供的另一種獨特的功能。簡單來講，Web剪貼就是一個圖標，用于表示上的網(wǎng)頁。，你只需要創(chuàng)建一個簡單的圖標來表示你的。Web剪貼圖標應該為60作為一名開發(fā)60的PNGApple。蘋果公司還建議使用“渾厚形狀與光鮮色彩的組合”。你不需要擔心用于定義圖標的圓角或光澤，因為會幫助你解決此問題。將圖標上傳到服務器后，你可以通過一個apple-touch-icon類型的示：來指定它，如下所的主屏幕中，方法是按底欄中的加號（），然后選擇Add to Home Screen。你的網(wǎng)頁上將出現(xiàn)一個簡

43、短的名稱和設計的圖標，它們采用標準的方式進行排列。chrome定義在外觀上的獨特性，但也，它在行為上也是獨特的。已經(jīng)討論了上的許多不同的或不可用的事件?，F(xiàn)在，正在了解特定于的代碼，接下來另一個話題的全新事件。3.5捕獲在本章開始部分，事件談到由于的輸入方法比較獨特，因此一些事件在上的工作方式發(fā)生了變化?，F(xiàn)在，的任務是弄清楚在設計友好的頁面時應避免哪些事件。接下來，許多標準的手勢以及這些觸摸將如何轉(zhuǎn)換為JavaScript事件。如果滾動窗口3.5捕獲事件35你更愿意手動捕獲觸你的需要。們建議你直接閱讀下一章，其中一些特定于WebKit的事件正好能滿足3.5.1單指觸摸表3-9列出了不同的單指觸摸

44、（第1章中遇到過）以及它們所創(chuàng)建的事件，你可以通過它們對有初步的認識。表3-9識別一些獨特的單指觸摸，其中一些與普通Web事件相關(guān)聯(lián)觸摸概述事件3氣泡（Bubble）滑動（Flick）輕擊/無（Tap / Nothing）輕擊/單擊（Tap / Click）用戶觸摸可單擊元素并按住不動，以顯示信息氣泡用戶通過單指滑動來滾動頁面用戶觸摸模擬鼠標，但未單擊在可單擊的元素上用戶觸摸模擬鼠標，并單擊在可單擊的元素上，并且它沒有發(fā)生變化無onscroll無mousemove mouseover mouseoutmousemove mouseover mouseout mousedown mouseup

45、click無輕擊/變化（Tap / Change）用戶觸摸模擬鼠標，并單擊在可單擊的元素上，并且內(nèi)容發(fā)生變化，如選擇框輕擊，雙擊（Tap, Double）用戶通過快速雙擊放大到列此處最重要的一點是，不允許你特定的事件。特別是，你不能看到兩個真正以界面為中心的單指觸摸：縮放和信息氣泡。在表3-9中給出的可的觸摸中，滑動是唯一一個特定于的，但它只與普通滾動事件相關(guān)聯(lián)。你可能不需要了解用戶滾動頁面的頻率，但如果你希望了解這些，可以通過簡單的JavaScript來實現(xiàn)：在本例中，window.onscroll函數(shù)會自動檢測滑動的發(fā)生，它類似于桌面上的普通滾動。一些開發(fā)希望能夠確定滑動的長度，但目前為止

46、，蘋果公司還沒有提供此功能。3.5.2兩指手勢還支持兩種兩指手勢。它們是讓模擬。如表3-10所示。真正與眾不同的功能，因為它們不能用鼠標來表3-10所特有的兩指手勢將生成額外的事件，其中一些仍然是普通的基于Web的事件手勢描述事件mousewheel兩指滑動/可滾動用戶用兩個手指在可滾動元素移動36第 3 章為重新開發(fā)網(wǎng)頁onscroll兩指滑動/不可滾動掐捏用戶用兩個手指不在可滾動元素移動用戶通過兩指掐捏操作進行放大或縮小無已經(jīng)接觸了掐捏縮放功能，無法看到它的事件可能也為奇，因為目前還不能訪問任何縮放事件。另一方面，兩指滑動是全新勢。事實上，許多用戶都是第一次接觸它，它也是中比較神秘的功能。

47、但是，如果你能夠信任用戶使用此手勢，則可以利用此功能完成一些有趣的任務。首先，兩指滑動允許你實現(xiàn)frameset。你會注意到，之前提到過它們，是因為單指滑動滾動在其中不起作用。但是，如果你可以訓練用戶執(zhí)行兩指滾動，那么他們將能夠輕松地滾動各個邊框（frame）。其次，它們允許你創(chuàng)建其他類型的可滾動元素，用于檢測mousewheel事件，從而在你的網(wǎng)頁中引入新的功能。下面這個例子展示了帶有一個的可滾動頁面，它通過一些JavaScript代碼檢測該區(qū)域中的兩指滾動。如果你希望鎖定頁面上頁眉和頁腳，但允許用戶滾動中間的內(nèi)容，那么這就是一個非常不錯的特性。最后，如果已經(jīng)在檢測網(wǎng)頁上的mousewhee

48、l事件，那么兩指滑動顯然是需要指導用戶使用的功能。3.6重新顯示網(wǎng)頁目前，我已經(jīng)了如何在已有網(wǎng)頁的基礎上針對對它們進行重新開發(fā)。它們大部分都是添加過程。但如果網(wǎng)頁無論如何也達不到你的要求該怎么辦呢？在這種情況下，考慮一個不同的解決方案，可能意味著在上完全重新顯示你的網(wǎng)頁。這不一定能適用于所有站點。要使用此方法，你必須將提取的數(shù)據(jù)構(gòu)建到站點中通常通過單獨網(wǎng)頁從外部源（如獲取數(shù)據(jù)，然后將這些內(nèi)容添加到模板中。）重新顯示頁面的第一步是為用戶創(chuàng)建一個新模板，然后在檢測到時選擇它們。為了達到最佳的效果，你的新模板應該使用“river”格式，這意味著你將在單個列中重新顯示網(wǎng)頁的數(shù)據(jù)，而不是使用多列的方法。

49、你應該將最重要的導航元素放置在頁面頂部，而將不太重要的導航元素放置在頁面底部。然后，你的內(nèi)容將在這些區(qū)域之間。但是，你應該僅僅決定重新顯示頁面（如果它在上確實不太好看）。由于是一個桌面級瀏覽器，因此你不需要大量裁剪網(wǎng)頁來確保它正常運行。一些專業(yè)就錯誤地將在的分欄中少了，而不是加強。色的用戶界面替換為沒有用river格式，這樣，它們提供給用戶的功能就減3.6重新顯示網(wǎng)頁37由于完全重新顯示受到限制，因此你可能希望考慮一個更加精細的方法。在為重新設計網(wǎng)頁時，更愿意先調(diào)整列的位置，然后再完全重新設計頁面。這種開發(fā)流程更針對于個人這是Web設計的固有特質(zhì)。通常，這種流程會確定哪些信息可以從頁面中移除，

50、從而允許其他的內(nèi)容都能更大、更清楚地顯示在相對較小的屏幕上。由于重新設計頁面的實際工作有很多個人成分，因此不能提供關(guān)于它們的準確指導。但可以回顧一下之前的工作，并總結(jié)這些頁面為提供了哪些經(jīng)驗。最后，來看看一些知名是怎么做的。在已有網(wǎng)頁的基礎上創(chuàng)建“優(yōu)化的”頁面和重新設計網(wǎng)頁（實際上相當于創(chuàng)建一個新的Web應用程序，這是本書第二部分其余的話題）之間有嚴格的界限劃分。接下來的兩個3例子肯定越過了這條界限。G及如何為頁面創(chuàng)建僅支持在和將幫助你深刻地理解如何重新顯示自己的頁面，以上查看的、特定于的UI。頁面是最早為上3.6.1G的G在很好地佐證了在重新顯示頁面的之一，或許是出于好意。G頁面的存頁面是多

51、么。它們包含大量字體很小的信息，并且大部分內(nèi)容都位于一個列中，因此即便雙擊放大也不能獲得足夠清楚的視圖。如今，G用戶的體驗已經(jīng)完全不同。初次登錄時，他們看到的內(nèi)容是相同的，屏幕左上方會顯示一個很小的登錄界面，它實際使用的是device-width視區(qū)。點擊第一個內(nèi)容頁面時，他們會看到一個完全重新顯示的頁面。圖3-2比較了G頁面在Mac的Safari上以及在G仿真器的移動Safari上的顯示效果。界面體現(xiàn)了開發(fā)為重新設計頁面時注重的一些理念。更重要的是，頁面在重新設計后采用的是river格式。它借鑒桌面網(wǎng)頁最左側(cè)的單列顯示，將一切內(nèi)容并入到頁面中單一列中，用戶只需在頂部導航即可（但底部看不到它）

52、。38第 3 章為重新開發(fā)網(wǎng)頁圖3-2G為用戶提供了完全不同的體驗，它的頁面經(jīng)過重新設計已經(jīng)成為Web應用程序此外，還采用了與chrome相同的外觀。在稍后介紹iUI時如何讓Web應用程序看上去更像本機應用程序。此chrome部分依賴于菜單的使用，并且僅當用戶單擊某個按鈕時才會顯示，與此處的按鈕極為類似。但是，G在上重新顯示頁面時也有一些限制。其一，它經(jīng)常將內(nèi)容隱藏在較深的層面，你只有進入單獨的網(wǎng)頁才能查看G列表。此外，壓縮了屏幕上的信息量。這將的內(nèi)容也變少了。但是，在幫助用戶閱讀內(nèi)容，同時也意味著，用戶通過慢速EDGE連接中查看消息時，你會很難判斷它的信息。這是因為大量與相關(guān)的信息已經(jīng)被移除了這對于郵件列表消息來說是一個尤為麻煩（郵件列表的標題占行的一部分）。頁面是另一個經(jīng)過重新設計、可在 上更具可讀性，這再次得益于river格式。3.6.2上重新顯示的。它們的主要內(nèi)容頁面在未使用將菜單移到另一個頁面的標準，而是創(chuàng)建了一個運行極為出色的分頁式界面（但最終會移出屏幕），這要歸功于缺少絕對定位能力。不再像之前對G屏幕，