在iPhone X上的网页呈现
 

横屏
 

       在横屏模式下，iPhone X呈现的是带有白色一个合适的背景条纹的网页。尽管很多部分都有不同的颜色背景，苹果自己的官网也是由这些白色的线条呈现。能让你的页面更有特色的唯一方法是给你的手机网页设置颜色——一个确保大多数情况下与你的品牌/网站的颜色方案一致的颜色。
 

竖屏
 

       当手机在竖屏时(这也是人们最常用的方式)，当视窗贯穿所有的边缘时，两边都没有白色线条。在竖屏模式下，iPhone X会在其周围渗透至整个屏幕。它是浸入式的，这样，视窗可以无缝地贯穿四边的圆角。此外，状态和URL /导航条会占用网页的自定义背景颜色。
 

        我们知道，我们通过媒体查询（Media Query）的方式改变网页的布局，我们在哪些宽度下改变布局，也就是我们所称作的断点，我们更习惯的思维是针对某些设备（比如桌面、平板电脑、手机）的 数据来设置断点，比如 1024 对应桌面、768对应pad、480 对应手机，但实际上，这些东西是靠不住的，因为这些屏幕尺寸会根据时代的发展不断的变化，我们的响应不应该只针对某些设备，我们需要的是一个区间值，而不 是将某一分辨率对应一种设备。断点肯定是需要有的，那这些断点是如何设置的呢？怎么才能不是为了断点而断点呢？实际上，这些断点的设置都是根据内容的需要 做的，当我们的内容在达到一个临界点后，视觉效果不符合人们的审美或影响了内容获取时，这就是我们需要的断点。但是我们可能无法在视觉设计的阶段就能覆盖 其尺寸区间内容所有状况，这样我们就需要把它和现有的设备相结合确立断点。