【瀏覽器-Safari-網頁開發指南】官方Sarari開發指南譯文

Safari是一個功能比較完整的瀏覽器。它支持全部按照W3C標準HTML,CSS,Javascript開發的網頁。 固然，讓網站正常訪問只是咱們的初級目標。開發者應該致力於給用戶提供更好的用戶體驗。好比支持不一樣手持觸屏設備顯示，針對多屏幕或分屏時的響應式設計，支持觸摸和手勢事件，等等。

保證頁面可正常訪問

• 支持aac,mp3,aiff和wave格式音頻。
• 支持基於H.264(經常使用MPEG-4格式)編碼方式的視頻。
• 手持設備支持狀況以具體設備爲準。
• 基本不支持插件，除一些經常使用插件(QuickTime, Flash, SilverLight)。
• 儘可能避免使用插件實現動畫或特殊效果，使用css或canvas替換。

safari瀏覽器下img標籤src屬性支持連接到mp4文件。其會預加載對應的資源，適用於小視頻或動畫gif。

加強用戶體驗

開發兼容性網頁

使用W3C標準開發網頁

到目前爲止，基於webkit引擎開發的全部瀏覽器包括Safari桌面端及ios系統移動端，都支持如下標準：

• 1.HTML5;
• 2.CSS;
• 3.ECMAScript6(Javascript)

參考優秀網頁設計實踐

• 始終添加DOCTYPE申明
• HTML，CSS和JavaScript文件分離
• 編寫良好結構化HTML代碼
• 瀏覽器特性檢測

更多設計實踐參考 Web Page Development: Best Practices

使用安全機制特性

使用分欄和塊顯示文字內容

保證文字在ios端可以更清晰的展現，而且支持雙擊縮放。

儘可能減小網頁所需資源

使用兼容性的JavaScript方法

• ios中，最多支持8個經過window.open()方法打開的窗口
• 使用alert, confirm, print, 和 prompt。

showModalDialog在ios端Safari暫時不支持。

使用-webkit-appearance:none可清除瀏覽器默認樣式。

textarea{
    -webkit-appearance:none; // safari 默認樣式清除
}

網頁優化

使用條件渲染CSS

• Safari只識別screen媒體類型，其餘兩種print和handheld會被忽略。
• 針對retina屏幕

@media screen and (-webkit-min-device-pixel-ratio: 2){
    font-size: 14px;
}

更多優化建議參看 優化你的網頁應用

配置視窗

使用視窗meta標籤

視窗meta標籤做用：

• 設置視窗寬度和初始比例
• 縮放等相關屬性

支持的meta屬性

• apple-mobile-web-app-capable 控制是否全屏顯示

<meta name="apple-mobile-web-app-capable" content="yes" >

• apple-mobile-web-app-status-bar-style 控制全屏時的狀態欄

<meta name="apple-mobile-web-app-status-bar-style" content="black">

• format-detection 是否檢測電話號碼並關聯撥號應用

// 禁用該功能
<meta name="format-detection" content="telephone=no">

• viewport 改變邏輯窗口大小

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

默認支持的常量：

• device-width
• device-height

支持的屬性及其默認值：

• width(980)
• height(根據設備縱橫比和寬度決定)
• initial-scale(自適應以便網頁可以在可視區域完整顯示)
• minimum-scale(0.25) 0到10
• maximum-scale(5) 0到10
• user-scalable(yes)

設置user-scalable可阻止當輸入框聚焦時頁面滾動的行爲。

定製你的樣式表

-webkit-爲前綴的css3屬性屬於W3C標準規範內

動態調整文字大小

當用戶雙擊屏幕時，頁面最好可以動態調整文字大小，以提升文字可讀性。

Safari瀏覽器中，給文字容器標籤設置-webkit-text-size-adjust屬性，實現動態調整文字大小。

該屬性只在Safari瀏覽器下有效

-webkit-text-size-adjust默認屬性通常爲auto。惟一例外是iPad中，該屬性默認值爲none。

固定定位屬性控制佈局

#sticky_container {
     top: 200px;
     right: 0;
     width: 300px;
     height: 400px;
     overflow: hidden;
     position: fixed;

position:fixed;保證固定元素不受界面滾動或縮放影響。

更多參考 Understanding Layout and Gestures in Safari on iOS and Lion from WWDC2011

高亮顯示元素

Safari瀏覽器默認高亮顯示被點擊的連接或可點擊元素。咱們能夠經過-webkit-tap-hightlight-color屬性改變或禁用該默認行爲。

// -webkit-tap-hightlight-color
-webkit-tap-hightlight-color: 0; // 禁用

設計表單

表單佈局

可顯示高度

頁面在輸入鍵盤展開或隱藏狀態下，頁面可展現內容高度，可經過下列公式大概計算：

設備高度-狀態欄高度-導航欄高度-鍵盤高度。

爲避免鍵盤展開時，覆蓋正在輸入的表單輸入框。使用上面公式合理安排動態調整表單元素的高度位置。

自定義表單元素樣式

使用-webkit前綴加屬性實現Safari下的特殊顯示樣式。

{
   width: 100px;
   height: 100px;
   -webkit-border-radius: 50px;
   background-color: purple;
}

Safari下，input輸入框可選值完整列表：列表 或參考w3c標準。

自動糾正和自動實現首字母大寫

autocorrcet

• on 自動糾正單詞
• off 禁用自動糾正單詞

autocapitalize

• on 針對單詞(首字母大寫) 單個字符(轉換爲大寫)
• off 禁用