码迷,mamicode.com
首页 > 其他好文 > 详细

首次写iPad布局感想(H5)

时间:2020-05-14 19:07:26      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:-o   mat   div   data-   ipa   苹果   end   onload   art   

一直做前端工作,却从来没有开发过平板的项目,想来也是有遗憾的,孰知,新公司的第二个项目就是要适配平板,刚开始是懵的,对于兼容,感觉是自己的短板,但庆幸的是这一版只需要兼容iOS系统就可以。

那我现在就说下开发iOS h5项目可能会进到的误区(知道很菜,但是写出来也是对自己加深印象)

- ios的专有meta

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
......列举常用,其他用时可百度

不要以为引入<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">对于禁止屏幕缩放就万事大吉了,这只针对于谷歌浏览器,要想兼容苹果自带的Safari还需要写入下面这段代码

    window.onload=function () {
      document.addEventListener(‘touchstart‘,function (event) {
        if(event.touches.length>1){
          event.preventDefault();
        }
      })
      var lastTouchEnd=0;
      document.addEventListener(‘touchend‘,function (event) {
        var now=(new Date()).getTime();
        if(now-lastTouchEnd<=300){
          event.preventDefault();
        }
        lastTouchEnd=now;
      },false)
    }

- button、input、textarea触发时的灰色背景块(高亮显示)
这都是需要我们去禁止的,毕竟要还原设计稿嘛,这是就要加入这几个属性

  -webkit-appearance: none;
  outline: none;
  -webkit-tap-highlight-color: rgb(0, 0, 0, 0);透明度需要为0
  -webkit-user-modify: read-write-plaintext-only;

- 页面滚动效果
如果在需要滚动的区块内添加了overflow: auto;这个样式
肯定会发现滚动的效果不是很流畅,这时就需要在body上添加一个样式overflow-x: hidden; 实现方式不止一种 也可以在滚动快上添加webkit-overflow-scrolling: touch;

首次写iPad布局感想(H5)

标签:-o   mat   div   data-   ipa   苹果   end   onload   art   

原文地址:https://www.cnblogs.com/10manongit/p/12890490.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!