【浏览器-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 禁用