网站设计制作适配苹果WatchOS5必掌握的一些知识


来源:企业网站改版 作者:坪山网站建设公司 日期:2019-01-12 浏览:

在WWDC大会上,苹果公司宣布了他们的新操作系统将包含的内容。没有太多的东西可以上下跳跃,也许你很喜欢你能在屏幕上设置的限制。对于网络开发人员或网站设计师来说,***的新闻之一就是WebKit被正确地移植到AppleWatch上,从AppleWatchOS5开始,你就可以浏览网站了。以前,电子邮件中的电子邮件链接,会要求用户移动到他们的手机/iPad/计算机上,但现在用户可以打开手表本身的网页并与之交互,您可能收到的任何包含URL的消息也是如此。接下来,我们一起来看看这是怎么工作的,然后熟练掌握网站设计制作适配苹果WatchOS5必掌握的一些知识。
Apple Watch OS5上用于浏览网站的许多功能,将遵循与您习惯的手机相同的UX。数字表冠仍然允许你垂直滚动浏览网页,你也可以用你的手指来做同样的事情。屏幕上的双击将放大网页的该部分,同样的双击手势将再次将您缩小。屏幕上的硬按键将使您来回(在历史中)控制页面,但您也可以左右滑动以在历史中向前移动和向后移动(您的Web浏览器历史记录,没有实际历史记录)。
目前,WatchOS5专注于通过该表获取基本内容,因此您可能会从Safari中看到一些明显的遗漏。
当iPhone***次发布的时候,它被赋予了320px的视窗。同样的视口也提供给了WatchOS5,但是,视图已经缩小到0.49,以便在较小的屏幕上生成布局。请记住,这意味着文本和图像将会小51%,但您的移动设备的布局(可能是堆叠布局)将保持不变。这意味着在WatchOS5上,元视口标记初始比例将被忽略,而是创建该比例以允许显示整个页面。这意味着,尽管已将“初始比例”设定为1.0,但它会将该比例减小到0.49。
因此,Watch OS5的视口为320 x 357,但缩放到0.49,媒体查询的宽度将解析为320px宽度。
如果您想针对WatchOS5的特定CSS(我们在过去已经解释过,为什么不需要设备特定的媒体查询),那么您将拥有以下内容:
@media
(min-device-width: 320px)
and (min-device-height: 357px) {
}
不过,如果需要,可以覆盖这些默认值。假设您已经创建了一个图片库,这些照片在移动屏幕上分成两列(50%),当您添加:
<meta name="disabled-adaptations" content="watch">
然后WebKit知道它不需要缩小它们的比例,它将基于真正的观察视口显示它们,并将它们呈现在一个全宽的列中。
Apple OS5手表上的窗体控件
使用窗体的界面已经针对电话进行了优化,它依赖于您使用新的特定类型的窗体类型控件来利用这些字段。
它支持数字(type=“tel”)、日期(type=“date”)和select(<;select>;)。这有助于Webkit为用户提供正确的界面。
窗体控件的***优点之一是,它们将您移到全屏以完成每个输入。这意味着您必须正确地标记表单,并附加适当的ARIA角色,以便用户在填写表单的过程中了解他们正在填写的内容。
Safari阅读器
对于文本较多的网页,Apply Watch OS5允许用户使用现有的Safari Reader模式读取内容。如果您还没有,现在是时候更新您的文章布局,以确保您正在标记您的内容,以达到***的。
让您的文章在Safari阅读器中看起来很棒的一些技巧
  • 将整篇文章包装在<;文章>;标签中。
  • 标题应具有itemprop=“title”
  • 作者应该有itemprop=“Author”
  • 副标题应有itemprop=“副标题”
  • 发布日期应为itemprop=“PUBUDATE”
您可以在文章中使用语义标记的次数越多,系统就越有可能以引用的方式为您的用户索引和显示内容,因此这样做是不够的。
对于大多数构建响应性网站的人来说,您最有可能已经处于一个非常有利的位置,几乎没有什么可做的来改进您的AppleWatch在OS5上的站点(可能除了添加新的META标记之外)。
深圳市圣玺网络技术有限公司提供坪山区域的营销网站建设、品牌网站设计、企业网站改版制作、网站优化外包、网络营销推广、百度霸屏、SEO按天按效果付费等互联网广告服务!
本文由网上采集发布,不代表本站立场,转载联系作者并注明出处:http://www.webgaiban.cn/wzgb/1782.html

X

截屏,微信识别二维码

微信号:15019448256

(点击微信号复制,添加好友)

  打开微信