一.解决iphonX白条,网站扩展到整个屏幕 网页在iphoneX的浏览器屏幕显示上,默认情况下在头部的2侧会出现白条背景,网站被限制在了一个“安全区域”内,移除白色背景的方法 方法一:设置body的背景色: .body{ background-color:#f00; } 方法二:添加mate属性viewport-fit=cover <meta name="viewport" content="width=device-width, initial-scale=1.0,

屏幕尺寸 垂直方向上,iPhone X的显示宽度与iPhone 6,iPhone 7 和 iPhone 8 的 4.7 英寸一样,但是比4.7英寸的显示屏高145pt. 安全区域 安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners).齐刘海(sensor housing).小黑条(Home Indicator)影响 viewport-fit 通过对meta标签viewport的扩展,可以调整页面的展现区域.viewport-fit有三个可选值: contain:使页面展示

iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见的吸底导航.返回顶部等各种相对底部 fixed 定位的元素).笔者通过查阅了一些官方文档,以及结合实际项目中的一些处理经验,整理了一套简单的适配方案分享给大家,希望对大家有所帮助, 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效

1.前言 到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域.用户要求越来越高,网站功能越来越好,效果越来越炫酷,这就要求我们产品质量越来越高,web前端开发而言是一个挑战,是一个难题,也是一个机遇.如何让我们所开发的手机页面能有更好的交互体验,就是这篇文章的主旨:移动web开发问题和优化小结.这个只是我自己在开发的时候知道的坑,如果大家有遇到什么别的坑,欢迎补充,或者觉得我哪里写错了,欢迎指点! 2.Meta标签 页面在手机上显示时,增加这

在asp.net中如果修改了配置文件web.config以后,会导致应用程序重启,所有回话(session)丢失掉,在 .NET Framework 2.0 以后的版本中,可以在一个单独文件中包括所有支持 configSource 属性的配置元素的配置.这样既不用重启应用程序,也方面管理,避免把所有的配置都放在web.config一个文件里使页面看起来比较乱.例如appSetting.connectionStrings节点.例子如下: 注意,configSouce中的文件路径只能为相对物理路径,

纪念我曾今热爱的数通(^o^). 物理层 一句话概述: OSI的第一层,它虽然处于最底层,却是整个开放系统的基础.物理层为设备之间的数据通信提供传输媒体及互连设备,为数据传输提供可靠的环境. 常见设备: 网线,中继器(增加传输距离),调制解调器(家用的猫),光纤,同轴电缆. 使用协议: EIA/TIA RS-232.EIA/TIA RS-449.V.35.RJ-45等 水晶头线序及设备互联法则: 1.水晶头的排线顺序 对于有线网络来说,在一个局域网里面,接触的最多的可能就是水晶头了,所以这里首先

基础知识 1. 关于iphoneX .iphoneXS.iphoneXSMax.iphoneXR机型的大小和像素   机型尺寸 注意:开发人员只需要记住开发尺寸 2. 屏幕组成 齐刘海(44px) + 安全区域 + 手势区域(34px)   屏幕组成 适配方案 1. viewport-fit viewport-fit="contain"展示区域在安全区中,不包括齐刘海和底部手势区域 viewport-fit="cover"展示区域整个屏幕中,包括齐刘海和底部手势区域

 iPhoneX的正面几乎都是屏幕,除了一块齐刘海(sensor housing)来放置前置摄像头和一些传感器.为了让全屏的网页在iPhoneX上有比较好的浏览效果,必须保证布局的内容不被iPhneX的四角的圆角屏幕以及刘海遮挡,除此之外,还要尽量避免让有交互的区域固定在嘴巴上(home indicator). 如下图所示在iPhoneX全屏模式下打开v2ex社区,其导航头被状态栏遮住,体验不是很好.  为了让UI布局完全处于可见区域,苹果提出了一种安全区的概念(Safe Area),如下图

​1.  iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开发尺寸的倍率关系,但这只是外在的表现.倍图核心的影响因素在于PPI(DPI),了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念:<基础知识学起来!为设计师量身打造的DPI指南> iPhone8在本次升级中,屏幕尺寸和分辨率都遗传了iPhone6以后的优良传统: 然而iPhone X 无论是在

1.ios js中时间不兼容YYYY-MM-DD这种格式的时间,只支持YYYY/MM/DD这种格式 // 在safari中new Date('2018-09-02') // Invalid Datenew Date('2018/09/02') // Sun Sep 02 2018 00:00:00 GMT+0800 (中国标准时间). 2.问题描述:ios手机上,网页中可滚动区域滚动不流畅,手指滑动多少页面就只滚动多少,没有弹性效果 解决办法:-webkit-overflow-scrolling

一.  安全区域(safe area) 与iPhone6/6s/7/8相比,iPhone X 无论是在屏幕尺寸.分辨率.甚至是形状上都发生了较大的改变,下面以iPhone 8作为参照物,先看看iPhone X尺寸上的变化: 苹果对于 iPhone X 的设计布局意见如下: 核心内容应该处于 Safe area 确保不会被设备圆角(corners),传感器外壳(sensor housing,齐刘海) 以及底部的 Home Indicator 遮挡.也就是说 我们设计显示的内容应该尽可能的在安全区域

因为iPhone X和iPhone XS的尺寸比是一样的,只需要把这两张图片补上就行. 具体原理性的东西就多说了,因为iPhoneX系列都一样,本文只说明一下具体怎么做,要适配屏幕,首先得让他以正确的姿势启动,如果你使用的是LaunchScreen.storyboard,就不需要考虑这个了,但如果你使用的是LaunchImag,就需要提供正确的启动图.需要注意的是XR使用的@2x的图. 启动图尺寸       机型                  命名 640 × 960       iPho

​1.  iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开发尺寸的倍率关系,但这只是外在的表现.倍图核心的影响因素在于PPI(DPI),了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念:<基础知识学起来!为设计师量身打造的DPI指南> iPhone8在本次升级中,屏幕尺寸和分辨率都遗传了iPhone6以后的优良传统: 然而iPhone X 无论是在

iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见的吸底导航.返回顶部等各种相对底部 fixed 定位的元素).笔者通过查阅了一些官方文档,以及结合实际项目中的一些处理经验,整理了一套简单的适配方案分享给大家,希望对大家有所帮助, 以下是处理前后效果图: 适配之前需要了解的几个新知识 安全区域 安全区域指的是一个可视窗口范围,处于安全区域的内

最近实在是蛮闲的,这都得益于苹果爸爸给力的审核,已经半个月了(委屈) 这个问题已经很久了,但是还是希望分享给各位,当然网上的教程的确很多: 1.automaticallyAdjustsScrollViewInsets automaticallyAdjustsScrollViewInsets是在iOS11之前为ScrollView自动处理内边距的,讲实话这个属性我从来都是禁止的,不喜欢被别人自动控制,主要原因还是因为控制不住别人的自动控制. 当设置为YES时(默认YES),如果视图里面存在唯一一个

iPhoneX取消了物理按键,改成底部小黑条,这一改动导致网页出现比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见的吸底导航.返回顶部等各种底部fixed定位的元素) ------------------------------- 适配之前链接几个新知识 安全区域 安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners),齐刘海(sensor housing).小黑点(Home Indic

转载自:https://www.cnblogs.com/lolDragon/p/7795174.html 1.  iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开发尺寸的倍率关系,但这只是外在的表现.倍图核心的影响因素在于PPI(DPI),了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念:<基础知识学起来!为设计师量身打造的DPI指南> iPhon

1.启动页 启动App,发现App只能居中显示,不能上下充满. 问题产生的原因是:iPhone X是5.8英寸,比5.5英寸的屏幕还要大,没有合适的启动页可以加载,所以只能使用以前5.5英寸的启动页,屏幕就会有黑色部分未充满. 解决办法:添加一张iPhone X的启动页,然后勾选iOS 8.0 and later的Portait选项. 附加一个启动页尺寸表: 如上面2步设置完毕后,启动页就可以全屏了. 2.状态栏和导航栏的高度变化 进入App主页就会发现App顶部被齐刘海遮住,左右两边不在安全区

啊,大概是人生中最镇定的三天了. 是了. Day0 教练超级巨,给了我们电话说出去要散养,有事别慌,打电话.身份证丢了别慌,打电话.火车误了别慌,打电话... 然后去了就路上颓颓颓.然后过去试机,打了个$splay$,键盘有点软不是很适应,鼠标倒是不错. 之后去吃饭了. 和mouding一群人会和之后. 准备吃上半年省选的时候去的那家火锅店. 哎呀时间过的真是快,上次来秦皇岛已经大半年前了,那时候还有那家店,洗脑循环着:“这麻辣烫,(长顿)真好吃啊.” 现在这家店已经消失了. 稍微有点伤感. 上

最近,有媒体报道有凯基证券分析师郭明琪在他的最新报告指出,iPhone X将在今年中结束生产.因为苹果已计划下半年推出新款iPhone,价格也比iPhone X会低并有新功能发布.所以他预计iPhone X将有可能会成为苹果有史以来最短命的旗舰机型.今天我们就来就这个话题聊聊. X会成为苹果最短命的旗舰机型吗?" title="iPhone X会成为苹果最短命的旗舰机型吗?"> 对于苹果来说,其一向是要最大化地压榨旗下硬件设备的价值.以iPhone为例,苹果通常会在新款