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 禁用

【浏览器-Safari-网页开发指南】官方Sarari开发指南译文的更多相关文章

  1. 前端避坑指南丨辛辛苦苦开发的 APP 竟然被判定为简单网页打包?

    传统混合移动App开发模式,通常会使用WebView作为桥接层,但随着iOS和Android应用商店审核政策日趋严格,有时会被错误判定为简单网页打包成App,上架容易遭到拒绝. 既然可能存在风险,那我 ...

  2. Android开发人员官方站点文档 - 国内踏得网镜像

    Android Developer 安卓开发人员官方站点无法正常訪问.即使FQ因为网络原因依旧訪问缓慢. 故整理相关字体.脚本.样式.页面资源,在踏得网server上建立了本地镜像.初始镜像时间201 ...

  3. 学会网页制作,web app开发,必须先从语法基础开始学习

    做软件开发,是从事编程开发工作,必须先从语法基础开始学习,通过语法组成产品效果.      前端开发的基础语法,由HTML+CSS+JavaScript组成,这是前端开发最基本的3个语言.       ...

  4. atitit. applet 浏览器插件 控件 的环境,开发,提示总结o9o

    atitit. applet 浏览器插件 控件 的环境,开发,提示总结o9o 1. 建立applet:: 1 2. Applet 码 1 3. Applet (awt)跟japplet (swing) ...

  5. 基于Asterisk的VoIP开发指南——Asterisk 模块编写指南(1)

    原文:基于Asterisk的VoIP开发指南--Asterisk 模块编写指南(1) 1 开源项目概述 Asterisk是一个开源的软件包,通常运行在Linux操作系统平台上.Asterisk可以用三 ...

  6. IOS开发苹果官方Sample Code及下载地址

    IOS开发苹果官方Sample Code及下载地址 在线浏览地址:https://developer.apple.com/library/ios/navigation/#section=Resourc ...

  7. Apple官方IOS开发入门教程[v0.2]

    今天,又跑去找IOS开发入门教程了,结果发现没什么好的PDF. 后来发现,原来苹果官方有开发入门教程,而且写的很好.所以整理出来了,给大家分享一下. 我就不在这里贴pdf的内容了,下面有苹果官方教程的 ...

  8. Hadoop权威指南:MapReduce应用开发

    Hadoop权威指南:MapReduce应用开发 [TOC] 一般流程 编写map函数和reduce函数 编写驱动程序运行作业 用于配置的API Hadoop中的组件是通过Hadoop自己的配置API ...

  9. Windows下OpenFOAM开发及使用环境配置指南 (2)【转载】

    转载自:http://openfoam.blog.sohu.com/158751915.html *************************************************** ...

随机推荐

  1. Tomcat Post请求大小限制

    理论上讲,POST是没有大小限制的.HTTP协议规范也没有进行大小限制,起限制作用的是服务器的处理程序的处理能力. 如:在Tomcat下取消POST大小的限制(Tomcat默认2M): 打开tomca ...

  2. StringBuffer总结分析

    构造方法 /** * Constructs a string buffer with no characters in it and an * initial capacity of 16 chara ...

  3. HTML学习笔记《二》 ----HTML部分标签应用

    HTML 部分标签应用 一.HTML中的注释.标签语法以及颜色表示方式 1.HTML中注释: <!-- .... --> 注释的目的:1. 辅助说明 2.代码调试(不同编程语言,注释方式略 ...

  4. Apache Maven 3.5.0配置安装

    1.maven 3.5 下载地址:http://maven.apache.org/download.cgi 2.下载了解压到 3.配置环境变量 4.测试看是否安装成功 5.maven配置(全局配置,用 ...

  5. Java xml 操作(Dom4J修改xml   + xPath技术  + SAX解析 + XML约束)

    1 XML基础 1)XML的作用 1.1 作为软件配置文件 1.2 作为小型的"数据库" 2)XML语法(由w3c组织规定的) 标签: 标签名不能以数字开头,中间不能有空格,区分大 ...

  6. Android 保存和恢复activity的状态数据

    一般来说, 调用onPause()和onStop()方法后的activity实例仍然存在于内存中, activity的所有信息和状态数据不会消失, 当activity重新回到前台之后, 所有的改变都会 ...

  7. redis 在linux安装

    转自:http://futeng.iteye.com/blog/2071867 下载 官网下载 安装 tar zxvf redis-2.8.9.tar.gz cd redis-2.8.9 #直接mak ...

  8. c# 依赖注入之---setterInjection(转)

    图3.1 Setter注入示意 定义一个接口: namespace SetterInjection { internal interface IServiceClass { string Servic ...

  9. ACM-某大牛的建议

    一般要做到50行以内的程序不用调试.100行以内的二分钟内调试成功.acm主要是考算法的,主要时间是花在思考算法上,不是花在写程序与debug上.  下面给个计划你练练:  第一阶段:     练经典 ...

  10. Maven库下载很慢解决办法,利用中央仓库

    以下四个都是可用的: http://mirrors.ibiblio.org/maven2/ http://mvnrepository.com/ http://repository.jboss.org/ ...