8适配 ios

2019-11-15 22:18:52 weixin_44623040 阅读数 0

vue h5项目适配ios的问题

h5项目在安卓上运行正常,但是在ios上就出现问题


1适配iphoneX以上型号底部栏遮挡的问题

@media (min-device-height: 810px) {
	padding-bottom: .5rem;
}

2ios页面缩放问题

index.html页面<head>标签里面加入如下<meta>

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

3ios日期格式和安卓不一样

举个栗子,安卓为: 2019-11-11,ios为2019/11/11。所以,你的计算需要替换一下,替换为/的格式,安卓和ios都能够识别。

'2019-11-11'.replace(/\-/g, '/')

4ios下点击浏览器复制链接不是当前页面

如果vue中,使用路由为router.push(),可以替换为router.replace()

5ios输入表单后,收起键盘页面篡位

在某些情况下,ios输入表单后,收起键盘,页面会篡位。

  • 如果页面不需要scroll的情况下,可以使用window.scrollTo(0, 0)。(这个方法不适用于需要下拉页面的)
  • 页面需要下拉,可以手动置底一下,这里使用了jquery的方法。因为使用document.document.Element.scrollTop = document.documentElement.scrollHeight安卓好使,ios就不好使了,下面这个方法安卓和ios都正常。
this.$nextTick(() => {
      $('html,body').animate(
        { scrollTop: document.documentElement.scrollHeight + 'px' },
        50
      )
    })
2014-09-23 15:36:11 wangLongBlog 阅读数 0

简介

先来看一下我们的新伙伴:Size Classes。在 iOS8 中,我们不用再像以前那样,一个页面新建多个 xib 文件来适配不同类型的屏幕,现在我们可以把各种尺寸屏幕的适配工作放在一个文件中完成,然后可以通过不同类别的 Size 来定制各种尺寸的界面。换句话说,你眼前的 Storyboard 不是一个普通的 Storyboard ,而是一个九合一的 Storyboard ,可以管理九种类型的屏幕。

对于宽度和高度而言,都有三种情况:紧凑 (Compact) 、任意 (Any) 、 正常 (Regular) ,所以一共有9个类别,在设置 Size Class 的时候页面会有提示。比如宽为 Compact 高为 Any 的情况,提示为 3.5-inch、4-inch、4.7-inch的横竖状态下的屏幕:

苹果官网文档举了一些例子,比如 iPad :

比如 iPhone :

比如 iPhone6 plus 的横屏状态:

实验

Size Class 的作用是将不同尺寸的屏幕进行分类处理,而最后进行布局管理的还是Autolayout。

下面我们来搞个小项目试验一下。项目源码可以在这里下载。

新建一个项目,进入到 Storyboard ,发现默认的尺寸是宽高均为 Any 的:

我们可以在右侧的视图中选择开启还是关闭 Size Class :

因为 Size Class 是依赖于 Autolayout 的,所以当你尝试关闭 AutoLayout 而打开 Size Class 的时候会有如下的提醒:

接下来我们先搞个 View 看看,测试一下直接扔进去会是什么效果:

看起来好像不错啊,难道不用做适配就可以了?

想太多。

我们把 Size 切换到 Compact 看下:

喔真的好 Compact 啊!

在不手动添加 Constraints 的情况下, Xcode 会自动自动分配一套默认的 Constraints ,以确保你在任何尺寸的屏幕下都看到一样坐标一样大小的页面。这就意味着我们有时可以忽视自动布局,不再需要设置那些自动布局且效果不错的控件,只需要为某些特定的视图创建 Constraints 。

不过现在我们想让这个正方形时刻保持居中,所以分别给它加上了四个 Constraints :

啊哈这样似乎就可以…就可以了…吗?

我们随便换了个 Size 看下效果,突然发现刚刚加的 Constraints 居然无效了,在导航栏里变成了灰色,在 Storyboard 里也看不到 Constraints 的影子:

这是因为刚刚我们的 Constraints 是在宽高均为 Compact 的 Size 中设置的,所以并不适用于其他尺寸的屏幕。这么说难道我们以后都要配置九份 Constraints 吗!这也太苦逼了吧!老板我们要涨工资啊!显然不是,我们只需要把默认的 Constraints 放在宽高均为 Any 的 Size 中即可:

这时再切换到其他尺寸就都没有问题了:

接下来,假设我们想在 iPhone 设备上显示两个 Label ,但是想在 iPad 上显示四个 Label,可以这样搞。

先把 Size 切换到 iPhone 的尺寸,然后添加两个 Label :

再把 Size 切换到 Regular ,添加三个 Label :

这时在 iPhone 中查看一下效果:

再去 iPad 里看下效果:

OK 就是这么简单。

实战

接下来我们来看一看如何利用 Size Class 来做适配。前面有说过, Size Class 不能解决适配问题,它的功能只是将屏幕进行分类,便于管理。真正搞适配的苦力还是 AutoLayout 。苹果的帮助文档给出三种方案解决 View 的适配问题。

我们先把项目改成最原始的版本,只留一个 View 在视图的正中央。原始版本的项目可以在这里下载。运行一下是这样的:

修改 Constraints

适配的第一个方案是针对不同尺寸的屏幕设置不同大小的 Constrain 。

我们选中一个 Constraint ,在右侧面板观察它的属性:

在右侧面板就是 Constraints 的值,第一行是默认值,适用于所有尺寸。如果要添加不同尺寸下的自定义值,可以点击加号:

这样就可以添加自定义的 Constraint 值了。其中, w 和 h 分别指宽 (width) 和 高(height) 。 C 是指 Size Class 中的 Compact, R 则对应 Regular , A 对应 Any 。

如果希望这个正方形在 iPad 下可以保持100的边距,在 iPhone 下可以保持0的边距,可以把每个 Constrant 的值都设为100,然后再添加一个 wC hA 的值为0:

运行一下程序看下,首先是 iPad 下:

简直完美,再看下 iPhone4s 下的效果:

哈哈似乎也不错。。。等下,说好的填满呢!怎么左右两边空了这么多空白?

突然想起了前几天在公司用 Xcode6 打开的项目再用 Xcode5 打开之后有些 xib 文件会报错,大意是: Xcode6 加了一些 Margin 我不认识。会不会是这些 Margin 在作怪呢?查了一下官方文档,确实在 iOS8 中多了一个 layoutMargin 的属性。偷偷拿 PS 量了一下,确实默认值是8个 point ,虚惊一场,还以为是 AutoLayout 坏了呢。

不过现在我不是很想要这个 Margin ,怎么把它关了呢?点击下方的 Pin 按钮,把 Margin 的勾选去掉即可:

然后再重新设置一下 Constraint ,OK它终于成功的填满了整个屏幕:

完整的源码可以在这里下载。

安装和卸载 Constraints

有时候我们可能会遇到比较复杂的设计,针对不同的尺寸需要有不同的布局,这和 Web 开发中的响应式设计颇有几分相似。

假设我们需要这样一个 View :在 iPad 下固定宽度,居中对齐,在 iPhone 下,则希望它保持左右边距居中对齐。

我们只需要添加 top 、 bottom 、 center x 、 width ,分分钟就可以搞出这样一个布局:

现在我们完成了第一步:在 iPad 下固定宽度,居中对齐。

接下来我们需要把 width 属性在 iPhone 中删除。选中 width 之后在右侧可以看到这样一个区域:

它表示,当前这个 Constraint 适用宽高均为 Any 的屏幕,和上一步相似,我们可以点击加号添加不同屏幕下的设置:

installed 前面打上勾,表示这个 Constraint 是适用这个尺寸的,如果没有打勾,则表明在那个尺寸下这个 Constraint 是无效的。比如下面的这个例子表示这个 Constraint 仅在宽高均为 Regular 的情况下 ( 也就是 iPad ) 有效:

接下来我们再添加上 leading 和 trailing 为0:

这样就能实现在 iPhone 下保持左右边距居中对齐的效果了:

但是打开 iPad 之后发现本来设置的固定宽度的效果失效了,变成了和 iPhone 一样的左右间距固定的情况。这是因为我们没有在 iPad 的屏幕下“卸载” (uninstall) 掉刚刚设置的 leading 和 trailing 。我们有两种方式解决这个问题。

第一种方案,选中 leading 和 trailing 这两个 Constraint 之后,在右侧添加宽高均为 Regular 的选项并去掉勾选,表明,这个 Constraint 适用于所有情况,就是不要用在宽高均为 Regular 的屏幕上:

第二种方案,切换到 Regular Regular 的尺寸之后,选中那两个 Constraint 然后按下Command+Delete ( 注意要按下 Command 键,要不然就是彻底删除了),就可以把这两个 Constraint 在当前的 Size 中卸载了:

运行一下, iPad 果然也没有问题了:

完整的源码可以在这里下载。

安装和卸载 View

有时候光设置 Constraint 是无法满足比较复杂的需求的,比如大屏下我希望能显示三个按钮,分别对应:吃早饭,吃午饭,吃晚饭。但是在 iPhone 等小屏下可能放不下这么多按钮,只能显示一个按钮:吃饭。遇到这种情况,我们只能对 View 进行安装 (install) 和卸载 (uninstall)。

我们先在 View 里面加上三个按钮:

但是我们并不希望这三个按钮出现在 iPhone 中,所以我们可以在右侧面板添加适用的尺寸,并去掉 Any 的勾选。这一步和上一章中 Constraint 的安装卸载十分类似:

可以看到左侧的 Button 变成了灰色,表示这个按钮在当前 Any 的尺寸下是不会显示的。我们再添加一个吃饭的按钮,添加 Regular 的尺寸并去掉勾选,表明自己不会在 Regular 屏幕中出现:

这样,在 iPhone 中我们可以看到 吃饭 的按钮:

而在 iPad 中可以看到 吃早饭 吃午饭 吃晚饭 的按钮:

完整的源码可以在这里下载。

其他

最后,无意中看到仿佛 Font 的左边多了点什么:

相信大家早已轻车熟路了,不妨动手试试看。可以参考苹果官方的帮助文档学习。

后话

第一次接触 Size Class ,还没有在实际项目中应用过,可能有些理解偏差,如有错误,还望指正,不胜感激。

一路走来,感觉有了 Size Class 之后,iOS 开发的适配工作可能并没有想象中的复杂,哪怕屏幕比更大还大,我们依旧能够真的笑,笑出声。

2018-07-06 14:50:58 weixin_41809141 阅读数 2625
 rem移动端布局怎么适配IOS和Android
        昨天“佬大”问我做的h5页面在ios上面显示正常,但是Android就变惨不忍睹了,于是我又开始了度量之路,几个小时过去了......“佬大”问好了没。我说:“还没”那你还是问下“俊伟”吧,果然一问牛逼的同事,迎刃而解的快感你感受到了没。做为一个程序员一定要学会问问问。

  我当时用的是这种方式

     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" id="vp" />
    <script type="text/javascript">
    // 把尺寸放大N倍(N是window.devicePixelRatio)
    var wd = document.documentElement.clientWidth*window.devicePixelRatio/10;
    //物理像素*设备像素比=真实像素
    document.getElementsByTagName("html")[0].style.fontSize = wd + "px";
    // 把屏幕的倍率缩小到N分之一(N是window.devicePixelRatio)
    var scale = 1/window.devicePixelRatio;
    var mstr = 'initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no';
    document.getElementById("vp").content = mstr;
    </script>

只能兼容ios,android失效

在实际项目开发中,我有用到的两种比较有效的方式(兼容ios和Android)

方法一:

案例实战

了解Flexible相关的知识之后,咱们回到文章开头。我们的目标是制作一个适配各终端的H5页面。别的不多说,动手才能丰衣足食。

创建HTML模板

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta content="yes" name="apple-mobile-web-app-capable">

meta content="yes" name="apple-touch-fullscreen">

<meta content="telephone=no,email=no" name="format-detection">

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

<title>再来一波</title>

</head>

<body><!-- 页面结构写在这里 --></body>

</html>

正如前面所介绍的一样,首先加载了Flexible所需

这个时候可以根据设计的图需求,在HTML文档的<body></body>中添加对应的HTML结构

这仅是一个示例文档,大家可以根据自己风格写模板

为了能更好的测试页面,给其配置一点假数据:

//define data
var pageData = {
    sections:[{
        "brannerImag":"http://xxx.cdn.com/B1PNLZKXXXXXaTXXXXXXXXXXXX-750-481.jpg",
        items:[{
            "itemLink": "##",
            "imgSrc": "https://placeimg.com/350/350/people/grayscale",
            "poductName":"Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093",
            "price": "299.06",
            "preferential": "满400减100",
            "activityType": "1小时内热卖5885件",
            "shopLink":"##",
            "activeName": "马上抢!"
        }
            ....
        }]
    }]
}

接下来的工作就是美化工作了。在写具体样式之前,有几个点需要先了解一下。

把视觉稿中的px转换成rem

读到这里,大家应该都知道,我们接下来要做的事情,就是如何把视觉稿中的px转换成rem。在此花点时间解释一下。

首先,目前日常工作当中,视觉设计师给到前端开发人员手中的视觉稿尺寸一般是基于640px750px以及1125px宽度为准。甚至为什么?大家应该懂的(考虑Retina屏)。

正如文章开头显示的示例设计稿,他就是一张以750px为基础设计的。那么问题来了,我们如何将设计稿中的各元素的px转换成rem

如何快速计算

在实际生产当中,如果每一次计算px转换rem,或许会觉得非常麻烦,或许直接影响大家平时的开发效率。为了能让大家更快进行转换,我们团队内的同学各施所长,为px转换rem写了各式各样的小工具。

CSSREM

CSSREM是一个CSS的px值转rem值的Sublime Text3自动完成插件。这个插件是由@正霖编写。先来看看插件的效果:

Flexible实现手淘H5页面的终端适配

有关于CSSREM如何安装、配置教程可以点击这里查阅

CSS处理器

除了使用编辑器的插件之外,还可以使用CSS的处理器来帮助大家处理。比如说Sass、LESS以及PostCSS这样的处理器。我们简单来看两个示例。

Sass

使用Sass的同学,可以使用Sass的函数、混合宏这些功能来实现:

@function px2em($px, $base-font-size: 16px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2em($px + 0px); // That may fail.
    } @else if (unit($px) == em) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1em;
}

除了使用Sass函数外,还可以使用Sass的混合宏:

@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
    //Conver the baseline into rems
    $baseline-rem: $baseline-px / 1rem * 1;
    //Print the first line in pixel values
    @if $support-for-ie {
        #{$property}: $px-values;
    }
    //if there is only one (numeric) value, return the property/value line for it.
    @if type-of($px-values) == "number"{
        #{$property}: $px-values / $baseline-rem;
    }
    @else {
        //Create an empty list that we can dump values into
        $rem-values:();
        @each $value in $px-values{
            // If the value is zero or not a number, return it
            @if $value == 0 or type-of($value) != "number"{
                $rem-values: append($rem-values, $value / $baseline-rem);
            }
        }
        // Return the property and its list of converted values
        #{$property}: $rem-values;
    }
}

有关于更多的介绍,可以点击这里进行了解。

PostCSS(px2rem)

除了Sass这样的CSS处理器这外,我们团队的@颂奇同学还开发了一款npm的工具px2rem。安装好px2rem之后,可以在项目中直接使用。也可以使用PostCSS。使用PostCSS插件postcss-px2rem

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var px2rem = require('postcss-px2rem');

gulp.task('default', function() {
    var processors = [px2rem({remUnit: 75})];
    return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});

除了在Gulp中配置外,还可以使用其他的配置方式,详细的介绍可以点击这里进行了解。

配置完成之后,在实际使用时,你只要像下面这样使用:

.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}

px2rem处理之后将会变成:

.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

在整个开发中有了这些工具之后,完全不用担心px值转rem值影响开发效率。

字号不使用rem

前面大家都见证了如何使用rem来完成H5适配。那么文本又将如何处理适配。是不是也通过rem来做自动适配。

显然,我们在iPhone3G和iPhone4的Retina屏下面,希望看到的文本字号是相同的。也就是说,我们不希望文本在Retina屏幕下变小,另外,我们希望在大屏手机上看到更多文本,以及,现在绝大多数的字体文件都自带一些点阵尺寸,通常是16px24px,所以我们不希望出现13px15px这样的奇葩尺寸

如此一来,就决定了在制作H5的页面中,rem并不适合用到段落文本上。所以在Flexible整个适配方案中,考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。

div {
    width: 1rem; 
    height: 0.4rem;
    font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
    font-size: 24px;
}
[data-dpr="3"] div {
    font-size: 36px;
}

为了能更好的利于开发,在实际开发中,我们可以定制一个font-dpr()这样的Sass混合宏:

@mixin font-dpr($font-size){
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}

有了这样的混合宏之后,在开发中可以直接这样使用:

@include font-dpr(16px);

当然这只是针对于描述性的文本,比如说段落文本。但有的时候文本的字号也需要分场景的,比如在项目中有一个slogan,业务方希望这个slogan能根据不同的终端适配。针对这样的场景,完全可以使用rem给slogan做计量单位。

CSS

本来想把这个页面的用到的CSS(或SCSS)贴出来,但考虑篇幅过长,而且这么简单的页面,我想大家也能轻而易举搞定。所以就省略了。权当是给大家留的一个作业吧,感兴趣的可以试试Flexible能否帮你快速完成H5页面终端适配。

方法二:
使用微信的官方框架WeUI

用代码来征服你吧,来感受它的强大之处



  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" charset="utf-8">
  5. <title></title>
  6. <link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">
  7. <script type="text/javascript" href="https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script>
  8. </head>
  9. <body>
  10. <div class="weui-cells__title">新增会员</div>
  11. <div class="weui-cell">
  12. <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
  13. <div class="weui-cell__bd">
  14. <input class="weui-input" type="text" placeholder="请输入姓名"/>
  15. </div>
  16. </div>
  17. <div class="weui-cell weui-cell_select weui-cell_select-after">
  18. <div class="weui-cell__hd">
  19. <label for="" class="weui-label">性别</label>
  20. </div>
  21. <div class="weui-cell__bd">
  22. <select class="weui-select" name="select2">
  23. <option value="1"></option>
  24. <option value="2"></option>
  25. </select>
  26. </div>
  27. </div>
  28. <div class="weui-cell">
  29. <div class="weui-cell__hd"><label class="weui-label">身份证号</label></div>
  30. <div class="weui-cell__bd">
  31. <input class="weui-input" type="text" placeholder="请输入身份证号"/>
  32. </div>
  33. </div>
  34. <div class="weui-cell">
  35. <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
  36. <div class="weui-cell__bd">
  37. <input class="weui-input" type="tel" placeholder="请输入手机号"/>
  38. </div>
  39. </div>
  40. <div class="weui-cell">
  41. <div class="weui-cell__hd"><label class="weui-label">地址</label></div>
  42. <div class="weui-cell__bd">
  43. <input class="weui-input" type="tel" placeholder="请输入地址"/>
  44. </div>
  45. </div>
  46. <div class="weui-btn-area">
  47. <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
  48. </div>
  49. </body>
  50. </html>
原来用好UI框架这么爽,分分钟做一个页面出来,哈哈哈。
2015-01-13 13:55:26 yuanfen139re 阅读数 0

App适配iOS8遇到的兼容问题:键盘方向与StatusBar方向不一致,阻止锁屏失效,OpenGL崩溃

2014-09-24, WED | COMMENTS

ios8 adapt苹果正式发布iOS8系统,到现在安装覆盖率已达48%,而iOS7的安装率是49%。所以,各位开发者又有得忙了,把所有的App都升级并适配到iOS8系统可不是一件轻松的事。

下面罗列一下我在适配iOS8过程中遇到的兼容问题——而同样的代码在iOS6/7是完全没问题的。

1. 键盘弹出方向与StatusBar方向不一致

在App中,第一个ViewController是只支持竖屏方向(Portrait)的,切换到第二个页面,默认也是Portrait,但用户可以点击按钮切换为横屏(Landscape)。

所以,我把App-Info.plist只选中了Portrait一项,并且在Root ViewController重载了以下方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
- (BOOL)shouldAutorotate
{
    return NO;
}

- (NSUInteger)supportedInterfaceOrientations
{
    return UIInterfaceOrientationMaskPortrait;
}

- (UIInterfaceOrientation)preferredInterfaceOrientationForPresentation
{
    return UIInterfaceOrientationPortrait;
}

然后在需要切换到横屏的时候,调用以下代码:

1
2
3
4
5
- (void)onFullScreenButtonTouchUpInside:(id)sender
{
    [self adjustViewFrameToFullScreen];
    [[UIApplication sharedApplication] setStatusBarOrientation:UIInterfaceOrientationLandscapeRight animated:NO];
}

由于在iOS6、7中,键盘方向是跟随状态栏方向的,所以一切表现正常,横屏下,无论设备方向怎样,键盘都是横着弹出。

但是,在iOS8中,键盘却随着设备方向弹出了。换言之,即使Interface Orientation为Landscape,但Device Orientation为Portrait,键盘就会以Portrait的方向弹出
如下图:

ios8 adapt keyboard

1.1 解决方法

我想要的是键盘不管设备方向,只关注状态栏方向,也就是StatusBarOrientation。由于iOS8新出不久,在网上没找到解决方案。后来我一同事发现手动更改设备方向可以解决这一问题:

1
2
3
4
5
6
7
8
9
- (void)onFullScreenButtonTouchUpInside:(id)sender
{
    [self adjustViewFrameToFullScreen];
    [[UIApplication sharedApplication] setStatusBarOrientation:UIInterfaceOrientationLandscapeRight animated:NO];
    //改设备方向
    if (IsIOS8) {
        [[UIDevice currentDevice] setValue:[NSNumber numberWithInteger:UIDeviceOrientationLandscapeLeft] forKey:@"orientation"];
    }
}

2. 禁用屏幕自动锁定失效

本来,防止屏幕锁定只需一句代码:

1
    [[UIApplication sharedApplication] setIdleTimerDisabled:YES];

但是,在iOS8中,偶尔会失效。测试人员发现了这个问题是在弹出键盘点击发送后必现,而原因不明。因为键盘出现与隐藏,理论上不应该影响这个idleTimerDisabled的属性。暂且认为是iOS8的Bug吧。

2.1 解决方法

在键盘收起的时候,重设IdleTimerDisabled

1
2
3
4
5
6
    - (void)onKeyboardDidHide:(NSNotification *)notification
  {
      if (IsIOS8) {
          [[UIApplication sharedApplication] setIdleTimerDisabled:YES];
      }
  }

3. OpenGL ES渲染时崩溃

在iOS中使用OpenGL ES渲染,切换到后台时需要停止渲染,否则会引起崩溃。见这里:How to fix OpenGL ES application crashes when moving to the background

但是在iOS8中,即使不是切换到后台,而是通过NavigationController切换到另一个ViewController再切回来,也会引起崩溃,崩溃点在:

1
    [EAGLContext presentRenderbuffer:GL_RENDERBUFFER];

猜测可能是,在iOS 8中,如果OpenGL的视图如果切换到不可见的ViewController,也需要停止绘制,否则也会引起在后台渲染OpenGL类似的崩溃。

3.1 解决方法

在ViewWillDisapper的时候停止渲染。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    - (void)viewWillDisappear:(BOOL)animated
  {
      [super viewWillDisappear:animated];
  
      if (_videoView && IsIOS8) {
          [_videoView pauseVideo];
      }
  }
  
  - (void)viewWillAppear:(BOOL)animated
  {
      [super viewWillAppear:animated];
  
      if (_videoView && IsIOS8) {
          [_videoView resumeVideo];
      }
  }

iOS的兼容真是个蛋疼的问题。

原文作者: lslin
原文链接: http://blog.lessfun.com/blog/2014/09/24/ios8-issue-keyboard-orientation-and-idletimerdisabled-not-working/
版权声明:自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0
2019-11-28 16:00:33 weixin_44306005 阅读数 178

去掉ios键盘顶上去页面的问题,select和textarea和input都要设置 可以这样写js代码

1.textarea多行文本框上边框有阴影

/* outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 */
outline: none;
/* -webkit-appearance可以改变按钮和其他控件的外观,使其类似于原生控件,是一个不规范的属性它没有出现在 CSS 规范草案中。此属性非标准且渲染效果在不同浏览器下不同,有些属性值甚至不支持,请慎用。*/
-webkit-appearance: none;

2.去掉ios键盘将页面顶上去的问题

//innerheight 返回窗口的文档显示区的高度。
//window.scroll(x-coord, y-coord)两个参数分别表示想要置于左上角的像素点的横纵坐标
$("input,select,textarea").blur(function(){
document.getElementsByTagName('body')[0].style.height = window.innerHeight + 'px';
window.scroll(0, 0);
});

 

App适配iOS 11

阅读数 2270