美文网首页
h5页面在不同ios设备上的问题

h5页面在不同ios设备上的问题

作者: cyh_1 | 来源:发表于2020-07-07 18:49 被阅读0次

    1、日期问题

    对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别。时间格式化的时候,在浏览器端处理好好的,到了手机端,就变成NAN,或者null,这种情况,是ios系统不能转化这种类型的时间。

    let date = new Date('2019-02-28 18:33:24');    // null`
    

    解决方案是,转成 yyyy/mm/dd hh:mm:ss 这种格式就可以了

    replace(/\-/g, "/");
    

    2、键盘收起,页面卡住,不回落

    ios12上,发现键盘收起的时候,页面会卡主,留下底部一片空白,稍微动一下页面,就会恢复。这种问题,在网上查了很多解决方案,大致是在blur事件中,让页面滚动一下。

    window.scrollTo(0, scroll);
    

    但是有一个很严重的问题:如果页面上有按钮需要操作 ,例如,评论的输入框+发布按钮,输入完文字,点击“发布”,触发click事件的时候,会导致页面先触发blur事件,键盘回落,然后一切就结束了。。。。按钮点击没有起任何作用。
    解决方案: 把click事件更换成ontouchstart 可以解决这个问题。 ontouchstart 事件优于click事件触发

    3、启动画面

    iOS下页面启动加载时显示的画面图片,避免加载时的白屏。可以通过madia来指定不同的大小:

    <!--iPhone-->
    <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
    <!-- iPhone Retina -->
    <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    <!-- iPhone 5 -->
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
    <!-- iPad portrait -->
    <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <!-- iPad landscape -->
    <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
    <!-- iPad Retina portrait -->
    <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    <!-- iPad Retina landscape -->
    <link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />
    
    

    4、iphone fix 失效,导致一些机器上textarea光标偏移

    解决方案: 所有兄弟元素变成absolute, 父元素overflow:auto;

    父元素:
    父元素:
    height: 100vh;
    position: relative;
    overflow: auto;
    
    兄弟元素:
    position:absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x:visible;
    overflow-y: auto;
    padding-bottom: 10 px;
    z-index: 1;
    

    5、键盘遮挡输入框

    输入框如果使用了fixed固定在底部,键盘顶起的时候,iphone上fixed会失效,导致页面滚动输入框会随着页面滚动,并且在部分机型上,输入框偶尔会被键盘遮挡,这种偶现的问题,很不友好。
    解决方案: 放弃使用fixed布局,页面如果有滚动,也放弃absolute,使用flex布局。

    6、IOS键盘字母输入,默认首字母大写

    解决方法:

    <input type="text" autocapitalize="off" />
    

    7、OS 系统中,中文输入法输入英文时,字母之间可能会出现一个六分之一空格

    解决方法:
    通过正则去除

    this.value = this.value.replace(/\u2006/g, '');
    

    相关文章

      网友评论

          本文标题:h5页面在不同ios设备上的问题

          本文链接:https://www.haomeiwen.com/subject/pyhhzqtx.html