如果你的app已经可以适配到iPad上了，那为什么不能也很好的在iPhone 上进行横屏适配呢?大多数的app都已经开始采用响应式布局的设计理念，从而以最小的成本来获得最大的收益。

　　iPhon X横屏状态下的网页

　　如果你是一名产品设计师，你可能会在网页上进行工作。在横屏的iPhone X上，你的网页在左右两侧会存在一个较大的空白区域。这是因为安全区自动切割超出安全区域的内容部分所带来的糟糕结果。为了避免这种尴尬，苹果出台了一套规范以此指导你的网页在横屏时适配iPhone X。这样基本可以使网页在横屏状态横向拓展背景以填充屏幕的同时，确保安全区域内网页内容的完整显示。

　　圆角

　　内容的剪辑也会发生在iPhoneX屏幕的四角。除非你隐藏了状态栏及底部的触碰区，否则不会面对这样的问题，因为他们覆盖了屏幕的四角。但是，对于大多数全屏使用的应用程序，比如相机确保四角中有足够的空白是非常重要的。建议你的按钮半径设置为16pt，以完美的遵循圆角的规则。

　　在iOS模拟器上预览你的应用程序

　　发布之后iPhone X可能会迅速售空，因此，我们大多数人无法立即使用。 手头没有设备，唯一的方法就是通过iOS模拟器。 您可以通过安装Xcode来预览您的应用程序和网站。

　　汉堡菜单之死

　　十年来，设计师们争先恐后地在原先的iPhone小屏幕上适配着内容，有很多设计师因为标签栏占用了太多的屏幕空间而彻底省去它。还有一些人的做法相对有创意一些，他们会放一个能从左面滑出的按钮来替代。这也就是最初的汉堡菜单。虽然起初很新鲜有趣，但最终却发现它是可用性的一个噩梦。因为在使用时，用户需要更多的点击操作。这也就意味着二级标签会更少使用。而且人们常常会忘记还隐藏了更多的内容。

　　随着屏幕的变大，单手操作也开始受到了影响。苹果公司甚至设计了双击home键就可以下滑整个用户界面的手势操作，这样以便手指可以够到导航栏。而汉堡菜单通常又是放在屏幕的左上角，用户就需要一个额外的双击才能到达这个菜单了。这也就导致了用户更难对这个菜单进行操作。随着屏幕的加长，设计师也不再需要那么纠结内容占了多少屏幕空间了。所以现在设计时都会选择用标签栏来取代汉堡菜单。iPhone X更是如此，也就是说，如果你的应用程序有超过两部分的内容，那我们就强烈建议你使用标签栏，而且iOS11的标签栏占用的屏幕空间也更小。

　　汉堡菜单在网页设计上是很常见的，也可以说是移动网页在手机上的设计体验比不上基于手机的设计体验更好的原因之一。虽然目前一些适配手机的网页采用了原生的控件，这对于网页设计来说是一个很棒的方法，但是，在iOS系统中尤其是iPhone X的设计中，你依然应该使用标签栏来代替汉堡菜单。https://designcode.io/cloud/ios11/iPhoneX-Hamburger.mp4

　　自适应布局和多任务处理

　　随着越来越多的屏幕分辨率需要适配，让你的页面布局具有适配性越加重要。使用像Sketch的Constraints和Xcode的Auto Layout这样的工具，你需要在设计的时候要考虑到屏幕尺寸是灵活的，在需要的时候可以展开多余的菜单。

　　STACK VIEWS

　　在Xcode里，你还会发现Stack Views, 这是一个神奇的工具用来帮助你的布局实现更灵活的变化。一些元素和组可以动态的堆积在一起，你需要做的仅仅是编辑是元素间的间距以及框内的内容填充。然后你可以使用Auto Layout来完成剩下的工作。苹果的建议是先使用Stack Views再使用Auto Layout。

　　点(pt)和像素(px)

　　开发人员使用点值，因此了解点值与像素的区别非常重要。当iPhone第一次推出时，这两个单位是一样的：1pt等于1px。然后，当视网膜的屏幕出现时，1pt变成了2px。所以，把pt看做首代iPhone中一个物理区域的标准大小，px就是存在于这个物理区域内的实际像素的密度(iPhone 4，5，6，7，8 = @ 2x，iPhone 8 Plus，iPhone X = @ 3x)。

　　iPhone的解决方案