h5打包后在ios下内容与状态栏重叠问题:

1:知道设备的类型:

var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

上面的isAndroid和isios返回的都是boolean类型的值。

2:当设备是ios时,添加一个给body加一个类名:

if(isiOS){
$("body").addClass("uh_ios7");
}

css文件下加样式:

.uh_ios7 .uh,.uh_ios7{
padding: 2em 0 0;
}

  

JS判断是IOS还是Android以及如何解决h5打包后在ios下内容与状态栏重叠问题的更多相关文章

  1. input 上传图片显示预览、调用摄像头,ios和Android的兼容性解决

    html代码: <img id="pic" src="img/pic.png"/> </span><input id=" ...

  2. 解决vue在ios或android中用webview打开H5链接时#号后面的参数被忽略问题angular同样适用

    在ios或android如果直接用webview在打开H5链接例如: 打开:http://localhost:8080/#/answer?id=1509335039582001 会变成 http:// ...

  3. js判断input输入框为空时遇到的问题 弹窗后,光标没有定位到输入框,而是直接执行我的处理页面程序

    无论是会员注册还是提交订单,我们都要使用到form表单,此时我们在处理数据时,就要判断用户填写的信息.一次是直接通过js判断input输入框是否没有填信息,然后在后台处理文件中通过过滤字符串后再次判断 ...

  4. Android Webview中解决H5的音视频不能自动播放的问题

    在开发webview的时候,当加载有声音的网页的时候,声音不会自动播放, 解决方法:在webview中调用js方法.这个方法需要在webview的setWebViewClient方法之后在onPage ...

  5. js判断手机系统(Android或IOS),跳转相应下载地址

    <script type="text/javascript"> $(document).ready(function(e) { var u = navigator.us ...

  6. js判断手机系统是android还是ios?

    var u = navigator.userAgent; //识别各种浏览器 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Ad ...

  7. js判断是否安装某个android app,没有安装下载该应用(websocket通信,监听窗口失去焦点事件)

    现在经常有写场景需要提示用户下载app, 但是如果用户已经安装,我们希望是直接打开app. 实际上,js是没有判断app是否已经安装的方法的,我们只能曲线救国. 首先,我们需要有call起app的sc ...

  8. vue.js - 解决vue-cli打包后自动压缩代码

    一.webpack中引入的压缩代码 /build/webpack.prod.conf.js const OptimizeCSSPlugin = require('optimize-css-assets ...

  9. 解决h5底部输入框在ios被软键盘顶飞 软键盘消失还下不来

    好吧,其实不是顶飞,准确点说应该是h5页面fiexed定位在底部的输入框在ios软键盘弹起的时候软键盘跟输入框有时会有一段悬空的距离,无法紧贴.在安卓机子上则没有这样的情况. 解决方法是通过h5的sc ...

随机推荐

  1. jQuery 属性操作 - addClass() 和 removeClass() 方法

    实例 向第一个 p 元素添加一个类: $("button").click(function(){ $("p:first").addClass("int ...

  2. Zabbix——创建网络配置模板

    前提条件: Zabbix版本为4.0 创建网络配置模板: Template Net Network Generic Device SNMPv2 h3c Template Module EtherLik ...

  3. MYSQL命令简要笔记

    mysqldump "C:\Program Files\MySQL\MySQL Server 5.7\bin\mysqldump.exe"    --host=localhost ...

  4. layui 图片与表单一起提交 + layer.photos图片层预览

    HTML基本结构: <form class="layui-form" action="" id="feedBackForm"> ...

  5. ASP.NET Core获取微信订单数据

    前几天对接了一波微信的订单,分享出来 1.生成签名 根据微信要求把appid.商户号.随机数.和订单号还有商户平台的密钥拼接成一个字符串然后进行MD5加密 2.拼接请求XML 然后用拼接好的XML向微 ...

  6. linux 操作系统下简单的命令行操作

    一: 配置linux 操作系统虚拟主机 首先安装一个虚拟机(百度上面有很多哦) , 我主要使用的是VMware workstation 然后 下载一个centos镜像6..5到7都可以; 然后用VMw ...

  7. IA64与x86-64的区别

    win7 sp1下载地址:https://download.microsoft.com/download/0/A/F/0AFB5316-3062-494A-AB78-7FB0D4461357/wind ...

  8. linux动态链接库

    前言 静态链接库会编译进可执行文件,并被加载到内存,会造成空间浪费 静态链接库对程序的更新.部署.发布带来麻烦.如果静态库更新了,使用它的应用程序都需要重新编译.发布给用户(对于玩家来说,可能是一个很 ...

  9. python--模块之re正则表达式

    简介: 正则表达式本身是一个小型的.高度专业化的编程语言,而在python中,通过内嵌集成re模块,我们可以通过直接调用来实现正则匹配. 正则表达式基础知识: --普通字符匹配自身 abc ----a ...

  10. 20145202马超《java》实验5

    两人一组结对编程: 参考http://www.cnblogs.com/rocedu/p/6766748.html#SECDSA 结对实现中缀表达式转后缀表达式的功能 MyBC.java 结对实现从上面 ...