关于iPhone X 适配

直接上代码，具体原理自己搜索网上一大堆

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="initial-scale=1">

    <!--<meta name="viewport" content="initial-scale=1, viewport-fit=cover">-->

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">-->

    <title></title>

    <style>

        body {

            margin: 0;

            font-family: Helvetica;

            font-size: 16pt;

            -webkit-text-size-adjust: 100%;

            background-color: #eef;

            padding-top: env(safe-area-inset-top);

            padding-left: env(safe-area-inset-left);

            padding-right: env(safe-area-inset-right);

            padding-bottom: env(safe-area-inset-bottom);

        }

        * {

            box-sizing: border-box;

        }

        #topBar {

            background-color: #729fcf;

            padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);

        }

        #topBar a {

            display: inline-block;

            height: 100%;

            padding: 12px;

            border-right: 3px solid rgba(255, 255, 255, 0.5);

            color: white;

            text-decoration: none;

            font-weight: bold;

            font-size: 18pt;

        }

        #topBar a:last-child {

            border-right: none;

        }

        #bottomBar {

            position: fixed;

            left: 0;

            right: 0;

            bottom: 0;

            background-color: #3465a4;

            text-align: center;

            padding: 8px;

            padding-left: env(safe-area-inset-left);

            padding-right: env(safe-area-inset-right);

            padding-bottom: env(safe-area-inset-bottom);

        }

        #bottomBar a {

            padding: 0 24px;

            color: white;

            font-size: 12pt;

            text-decoration: none;

        }

        h1 {

            margin: 12px 0 0 0;

        }

        h2 {

            color: #aaa;

            font-size: 12pt;

            text-align: left;

            margin: 0;

        }

        .post {

            width: 100%;

            margin-bottom: 50px;

            padding: 12px;

            padding-left: env(safe-area-inset-left);

            padding-right: env(safe-area-inset-right);

        }

        .post p:first-child {

            margin: 0;

        }

    </style>

</head>

<body>

<div id="topBar"><a href="#">Blog</a><a href="#">Photos</a><a href="#">Projects</a></div>

<div class="post">

    <h1>Welcome</h1>

    <h2>two hours ago</h2>

    <p>Hi!</p>

    <p>Welcome to my sample blog!</p>

    <p>This post is here to help demonstrate how easy it is to take an existing site, along with full-width bars and fixed-position elements, and make it take full advantage of iPhone X's edge-to-edge display.</p>

    <p>The actual post describing how to adopt the new API is over on the <a href="https://webkit.org/blog/7929/designing-websites-for-iphone-x/">WebKit blog</a>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>

    <p>I hope that it helps you adopt these new features in your websites.</p>

</div>

<div id="bottomBar"><a href="#">About Me</a><a href="#">Contact</a><a href="#">Site Map</a></div>

</body>

</html>

关于iPhone X 适配的更多相关文章

iOS开发点滴：iPhone屏幕适配
最近开始做iOS开发,遇到一些小问题和解决方法,记录下. 今天是iPhone屏幕适配 iPhone5出来之后屏幕就有iPhone就有了2种尺寸:3.5寸和4寸,xcode 5 的IB设计器里面界面 ...
大屏iPhone的适配 +iOS 图片尺寸要求
摘自:http://blog.ibireme.com/2014/09/16/adapted_to_iphone6/ 苹果公司官网设计介绍到:Retina显示屏的超高像素密度已超过人眼能分辨的范围.Re ...
iOS 11 & iPhone X 适配资料集
本文主要简单谈谈并收集一些关于 iOS 11 & iPhone X 的适配及设计指南. iPhone X 众所周知,iPhone X 屏幕与其他的 iPhone 设备均不同,苹果称 iPhon ...
混合式App开发 Apicloud 官方iPhone X 适配
iPhone X 适配由于iPhone X的特殊造型,为了方便开发者对iPhone X进行适配,苹果在iOS 11中引入了Safe Area的概念,引擎也在api对象下添加了safeArea属性和s ...
微信小程序中的iPhone X适配问题
微信小程序中的iPhone X适配问题小程序中下方的导航会被iPhone X下面的那条黑线盖住[微笑脸],所以要专门为了iPhone X做样式上的适配[微笑脸] wx.getSystemInfo({ ...
移动端iPhone系列适配问题的一些坑
完成移动端的开发项目之后,发现谷歌自带的调试器似乎没有什么太大的作用,整天借同事的苹果手机测bug,尽管同事不厌其烦,但还是觉得这iPhone系列适配问题适配到想逃逃逃,好在项目已经顺利完成,测试通过 ...
iOS - iPhone屏幕适配/启动图适配/APP图标适配(iPhone最全尺寸包含iPhoneX/XR/XS/XS Max等)
趁iPhone新品还没有发布,先整理一下屏幕适配.启动图适配.APP图标适配的笔记,方便以后查阅: 注:部分图片来源于网络违删; (一)iPhone屏幕适配: (1)屏幕分辨率: ①设计尺寸规范(表 ...
iPhone屏幕适配，历史及现状(http://hjcapple.github.io/2014/10/10/iphone-screen.html)
iPhone屏幕适配,历史及现状初代iPhone 2007年,初代iPhone发布,屏幕的宽高是320×480像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到iPhone 3GS的也保持不变 ...
iPhone X适配方案
iPhone X适配方案 https://github.com/Wscats/iPhone-X 绝对长度单位英寸厘米毫米磅 pc inch cm mm pt pica 相对长度单位是网页设计 ...
ipad和iphone的适配
关于xib或者storybord下iphone的横竖屏的适配以及ipad的适配 ios8出现了Size Classes,解决了各种屏幕适配的问题,他把屏幕的宽和高分别分成了三种,把屏幕总共分成了九种情 ...

随机推荐

Linux学习-IP设置
网卡命名规则 CENTOS6的网卡命名方式:它会根据情况有所改变而非唯一且固定,在CENTOS6之前,网络接口使用连续号码命名: eth0. eth1等,当增加或删除网卡时,名称可能会发生变化 CEN ...
maven工程目录和类加载器ClassLoader的记录
URL url = this.getClass().getClassLoader().getResource("/" + packageName.replaceAll(" ...
SQL——AND、OR运算符
一.AND.OR运算符基本说明 AND : 所有条件成立,则筛选出这条记录. OR : 只要其中一个条件成立,则筛选出这条记录. 演示student表: 二.AND运算符使用查询name = '小明 ...
爬虫请求库之selenium
一.介绍 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟浏览器的操作, ...
性能监控工具的配置及使用 - Spotlight On Oracle(oracle) 转：紫漪
一. Spotlight On Oracle(oracle) 1.1. 工具简介 Spotlight是一个强有力的Oracle数据库实时性能诊断工具,提供了一个直观的.可视化的数据库活动展现 ...
go语言学习---使用os.Args获取简单参数（命令行解析）
实例1: //main package main import ( "fmt" "os" ) func main() { fmt.Println(os.Args ...
玩转Spring全家桶笔记 03 Spring的JDBC操作以及SQL批处理的实现
1 spring-jdbc core JdbcTemplate 等相关核心接口和类(核心) datesource 数据源相关的辅助类(内嵌数据源的初始化) object 将基本的JDBC操作封装成对象 ...
Python接口自动化基础---token鉴权
有些登录使用cookie,有些登录需要token验证,token传参一般有两种形式,一种是在请求头中,一种是使用URL传参这里举例说明一下请求头中的token方式: #登录 param1={'use ...
glfw内存泄露测试
1. glfwInit() 和 glfwTerminate() 放在主线程循环次数 1 内存 14M 循环次数100 46M 循环次数1000 49M 2. glfw ...
【洛谷 P3193】 [HNOI2008]GT考试（KMP，dp，矩阵乘法）
题目链接 \(f[i][j]\)表示准考证号到第\(i\)位,不吉利数字匹配到第\(j\)位的方案数. 答案显然是\(\sum_{i=0}^{m-1}f[n][i]\) \(f[i][j]=\sum_ ...

关于iPhone X 适配

关于iPhone X 适配的更多相关文章

随机推荐

热门专题