IPhone X 移动端 兼容性问题
Iphone x 的刘海给屏幕增加了34pt的安全距离，就会导致我的页面布局错位。底部的tabbar 会被刘海挡住。
以下是专门针对vue 解决tabbar 被挡住的解决办法
1. 给index.html 页面添加 meta 属性
// 避免浏览器使用IE的兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
// 苹果手机全屏 显示 非常重要
<meta name="apple-touch-fullscreen" content="yes">
// 页面的是否可以缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
2. 用storage 存储手机的类型 在util 下定义一个 storage.js 文件
/**
* 用于读取和存储localstorage
*
* @class LocalStorage
*/
class LocalStorage {
constructor (prefix = '__crm__', expired = null) {
// 存储前缀
this.prefix = prefix
// 过期时间 如果为零则永久
this.expired = expired
}
/**
*设置数据
*
* @param {*} key
* @param {*} [value={}]
* @param {*} [expired=null]
* @memberof LocalStorage
*/
setItem (key, value = {}, expired = null) {
const storage = this.getItem()
const row = {}
// 如果开启了全部默认设置过期时间
if (this.expired) {
row['expired'] = this.expired
row['time'] = (new Date()).getTime()
}
// 单独设置某个过期时间
if (expired) {
row['expired'] = expired
row['time'] = (new Date()).getTime()
}
row['value'] = value
storage[key] = row
this.setDataToLocalStorage(storage)
}
/**
*获取数据
*
* @param {*} key
* @memberof LocalStorage
*/
getItem (key = null) {
const storage = this.getLocalStorage(key)
// 不传参数则返回全部
if (!key) {
return storage
}
// 没有设置过期时间
if (storage[key] && !storage[key]['time']) {
return storage[key].value
}
if (storage[key] && this.isExpired(key, storage[key])) {
return storage[key].value
} else {
return null
}
}
/**
*把数据保存到本地缓存
*
* @param {*} storage
* @returns
* @memberof LocalStorage
*/
setDataToLocalStorage (storage) {
try {
return localStorage.setItem(this.prefix, JSON.stringify(storage))
} catch (error) {
throw error('设置失败...')
}
}
/**
*获取本地缓存数据
*
* @memberof LocalStorage
*/
getLocalStorage (key = null) {
let storage = {}
try {
storage = localStorage.getItem(this.prefix)
} catch (error) {
storage = {}
}
storage ? storage = JSON.parse(storage) : storage = {}
return storage
}
/**
*判断是否过期
*
* @param {*} value
* @memberof LocalStorage
*/
isExpired (key, value) {
const currentTime = (new Date()).getTime()
const storageTime = value.time
if ((currentTime - storageTime) <= Number(value.expired)) {
return true
} else {
this.clear(key)
return false
}
}
/**
*删除某个缓存
*
* @param {*} key
* @memberof LocalStorage
*/
clear (key = null) {
const storage = this.getItem()
if (!key) {
return localStorage.clear(this.prefix)
}
if (storage[key]) {
delete storage[key]
}
this.setDataToLocalStorage(storage)
return key
}
}
3. 定义一个存储手机类型的model.js 文件
export default {
'iPhone X': '30px',
'iPhone XR': '30px',
'iPhone XS': '30px',
'iPhone XS Max': '30px',
}
4. vue的 mixins 添加一个 model.js 文件 自定义一个vue 属性
import models from '@/utils/models'
import storage from '@/utils/storage'
export default {
data() {
return {
paddingBottom: '0px',
}
},
created() {
if (storage.getItem('model')) {
let type = 'iPhone X'
if (storage.getItem('model').indexOf(type) !== -1) {
this.paddingBottom = models[type]
}
}
},
}
5. 剩下的可以在任何一个页面，任何一个html 页面下面 添加 自己定义的paddingBottom属性。可以在Iphone x 手机完美兼容
举个例子
<van-tabbar:style="{paddingBottom: paddingBottom}" />
IPhone X 移动端 兼容性问题相关推荐
- 京东方期望为iPhone 15高端版供应高刷新率OLED面板
1月25日消息,据国外媒体报道,已进入苹果iPhone OLED面板供应链的京东方,也希望能扩大他们在iPhone面板中的份额,并将产品扩展到高端版本. 韩国媒体在最新的报道中就表示,京东方已设定了在 ...
- iPhone 13高端版所需120Hz刷新率屏幕或将由三星独家供应
5月5日消息,据国外媒体报道,此前曾有分析师预计,苹果今秋将推出的iPhone 13系列智能手机,两款高端版将采用能效更高的LTPO技术OLED屏幕,支持120Hz刷新率. 而韩国媒体在最新的报道中表 ...
- 前端项目开发中碰到的坑、移动端兼容性问题
前端开发中碰到的坑.移动端兼容性问题 1.ios兼容input光标高度 问题:input输入光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样. **出现问 ...
- iPhone 15 高端版本万元起步；华为授权 OPPO 使用其 5G 技术；DeepMind 推出 AI 编剧|极客头条
「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 整理 | 梦依丹 出品 | CSDN(ID:CSDNnews ...
- iPhone 15 高端版本万元起步；华为授权 OPPO 使用其 5G 技术；DeepMind 推出 AI 编剧|极客头条...
「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 整理 | 梦依丹 出品 | CSDN(ID:CSDNnews ...
- 移动端兼容性问题(建议码住，持续更新哦～)
最近开发移动端较多,整理了一下最近遇到的一些兼容问题 1.1px在移动端的解决方案 最开始当然从移动端的兼容性适配开始了,关于的详细解释,在我上一篇博客中已经大概讲了一下,1px在移动端的解决方案,问 ...
- 移动端兼容性测试你还在用adb安装app？快试试这种方法吧！
一.写在前面 在做Android移动端兼容性测试时,我们经常会将手机连接PC,然后通过adb的命令将被测app安装进手机,一台手机测完后跟着操作下一台,如此往复很是费事. ps:公司有兼容性测试平台且 ...
- 移动端兼容性问题解决方案
1. IOS移动端click事件300ms的延迟响应 移动设备上的web网页是有300ms延迟的,往往会造成按钮点击延迟甚至是点击失效.这是由于区分双击事件和双击屏幕缩放的历史原因造成的, 2007年 ...
- ios支持video标签吗_video标签移动端兼容性问题总结
最近开发了一个wap版的贵金属营销直播间,直播间主要由视频区和互动区组成.视频区使用了原生的video标签实现视频播放:互动区展示了分析师和用户之间的文本对话. 直播间开发过程中遇到了不少兼容性问题, ...
最新文章
- 微信自动回复和自动抢红包实现原理（三）：自动抢红包
- 海量服务 | 论服务器极致化海量运营交付的未来
- JS中DOM节点的CRUD
- PHP+jQuery+MySql实现红蓝投票功能
- rzsz上传下载命令
- 使用Python批量下载数据
- 10种经典机器学习算法——Python版
- java正则替换数字_Java 正则表达式，替换图片名称，替换数字，和谐用语，复制文件...
- php怎么加一个透明的菜单栏,window_PHP制作下拉透明菜单，下拉透明菜单 script language= - phpStudy...
- 商品管理查询分类下的所有子类目
- 快速去除word中的软回车（向下箭头）
- 电影《道士下山》主创亮相 董琦：转身遇贵人
- 网站修改了文档html默认保存路径,我在网页上打开word文档修改后就直接保存了 请问他的保存路径在哪???...
- mysql指定取值范围_MySQL中各种字段的取值范围(转)
- Eclipse：解决Eclipse看不了java的源码
- 从零搭建一个自动化运维体系
- MBA-day29 算术-绝对值初步认识
- pyhton GUI编程之Tkinter详细讲解二
- AS2.0列表带图片视频播放器【附原码下载】
- “穷X”事件程序员致歉：以后老实写代码