为iPhone Xs和Xs Max调整网站设计

苹果几乎每年都会举办一场令人期待的科技盛事;这些发布会会介绍新产品和现有产品的更新,比如iPhones和iPads。最新的iPhone也不例外:人们在苹果专卖店外的街道两旁排起长队,希望能买到最新款的iPhone:X和Xs Max。

虽然苹果不会提供具体的销售数量,但据估计,苹果今年前三个月共售出五千两百万部iPhone,而iPhone X是他们最大的个人销售商。随着所有这些iPhones上市,网站必须更新其设计,才能利用其新的布局和功能。以下是hostease美国虚拟主机小编为大家介绍更新网站设计的具体步骤:

新版本对网站有何影响

当有人第一次得到他们的新iPhone的时候,他们会注意到屏幕表面和手机框架(称为斜面)之间的边界几乎不存在。这意味着,整个手机将似乎是一个大屏幕,没有框架围绕它。由于大多数网站的设计都不是为这种类型的显示屏设计的,这些手机将在网站周围的没有框架屏幕上设置一个“安全区域”,这样网页就不会乱七八糟。同时,这个安全区域将填充背景色。

此外,新的设计特点是在手机顶部有一个剪切区域(通常称为“凹槽”),没有主键(这已被屏幕底部的一条线所取代)。这种新的设计风格可能会给网站的显示带来,比如无法显示整个页面,某些功能不可见或不可用。

如何为新iPhone调整网站设计

对于大多数网站来说,这个新的设计计划不会是一个问题。如果主要使用文本和图像,布局将使用背景色,完美地显示在“安全区域”中。但是,需要注意以下几点:

  • 全屏——要在网站上使用整个iPhone屏幕,只需要通过改变视图元标签“最佳视图”来调整网站。其默认设置为“自动”,如果要将其更改为全屏,可以将设置更改为“全屏覆盖”。然后,可以刷新页面并查看其呈现效果,但凹口可能会覆盖某些功能,导航的下边框也可能更难使用。
  • 重新设计——完成了全屏显示之后,需要重新设置功能,让他们出现在屏幕中。WebKit包含一个名为env()的新函数,它可以完成这项任务。网站所有者有四个默认环境可以添加填充,将功能移出被覆盖区域,其中包括“左侧安全区域插图”、“右侧安全区域插图”、“顶部安全区域插图”和“底部安全区域插图”。

使用了这些插件并添加了填充之后,就可以在页面上移动功能按钮的位置,使其可见并完全起作用。还有一些元素包含min()和max()变量,网站所有者可以输入这些变量,减轻此过程的工作量。

对现有网页进行一些简单的调整,可以最大限度地增强用户使在所有格式(包括iPhone X及其Xs变种所使用的新移动技术)上查看站点的能力。这是势在必行的,因为越来越多的人正在通过智能手机查看在线内容。想知道更多的内容可以阅读怎么提高网站的访问速度 。

留下评论

您的电子邮箱地址不会被公开。 必填项已用*标注