首次写iPad布局感想（H5）

jhhfft 发布于2019-08-29 12:38 / 2954人阅读

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

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

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

- ios的专有meta



......列举常用，其他用时可百度

不要以为引入对于禁止屏幕缩放就万事大吉了，这只针对于谷歌浏览器，要想兼容苹果自带的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;

混合云 idc机房托管感想 python感想人工智能感想云栖大会2016感想

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112042.html

首次写iPad布局感想（H5）

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

AlphaGooo 2019-08-20 16:47 评论0 收藏0
移动端适配方案

摘要：业务环境是决定整体项目的适配方案的核心因素。而淘宝的主站和类似，分为移动端页面和端页面，端页面同样有着左右的留白，这也是为了让用户能够在宽屏的时候将注意力集中在中间区域。移动端适配方案移动端适配方案是一个老生常谈的话题，但是对于不同的项目、不同的业务场景可能会需要不同的适配方案来进行移动端适配，向下兼容的baseline也需要提前订好。整体宽高其实移动端适配就和下面的玩具一样，...

feng409 2019-08-30 15:54 评论0 收藏0
Web开发系列【1】实用的网页布局（PC端）

摘要：利用左侧浮动，右侧盒子通过形成了。三列布局这是比较复杂的布局，适合有复杂操作功能的网页，如各大电商网站。建议升级您的浏览器，或使用等高级浏览器，将会得到更好的体验在熟悉那些常用的软件、工具后，我们正式开始开发，在前期准备工作之后，我们要做的事情是写页面，也就是网页布局。在w3c、菜鸟、慕课网等等网站上都有基础的 HTML+CSS 知识讲解，在初期学习中，跟着教程全部过一遍就差不多了。...

Andrman 2019-08-02 16:05 评论0 收藏0
Web开发系列【1】实用的网页布局（PC端）

摘要：利用左侧浮动，右侧盒子通过形成了。三列布局这是比较复杂的布局，适合有复杂操作功能的网页，如各大电商网站。建议升级您的浏览器，或使用等高级浏览器，将会得到更好的体验在熟悉那些常用的软件、工具后，我们正式开始开发，在前期准备工作之后，我们要做的事情是写页面，也就是网页布局。在w3c、菜鸟、慕课网等等网站上都有基础的 HTML+CSS 知识讲解，在初期学习中，跟着教程全部过一遍就差不多了。...

jerryloveemily 2019-08-29 16:44 评论0 收藏0