摘要:一直做前端工作,却从来没有开发过平板的项目,想来也是有遗憾的,孰知,新公司的第二个项目就是要适配平板,刚开始是懵的,对于兼容,感觉是自己的短板,但庆幸的是这一版只需要兼容系统就可以。
一直做前端工作,却从来没有开发过平板的项目,想来也是有遗憾的,孰知,新公司的第二个项目就是要适配平板,刚开始是懵的,对于兼容,感觉是自己的短板,但庆幸的是这一版只需要兼容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;
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/83158.html
摘要:一直做前端工作,却从来没有开发过平板的项目,想来也是有遗憾的,孰知,新公司的第二个项目就是要适配平板,刚开始是懵的,对于兼容,感觉是自己的短板,但庆幸的是这一版只需要兼容系统就可以。 一直做前端工作,却从来没有开发过平板的项目,想来也是有遗憾的,孰知,新公司的第二个项目就是要适配平板,刚开始是懵的,对于兼容,感觉是自己的短板,但庆幸的是这一版只需要兼容iOS系统就可以。 那我现在就说下...
摘要:利用左侧浮动,右侧盒子通过形成了。三列布局这是比较复杂的布局,适合有复杂操作功能的网页,如各大电商网站。建议升级您的浏览器,或使用等高级浏览器,将会得到更好的体验 在熟悉那些常用的软件、工具后,我们正式开始开发,在前期准备工作之后,我们要做的事情是写页面,也就是网页布局。在w3c、菜鸟、慕课网等等网站上都有基础的 HTML+CSS 知识讲解,在初期学习中,跟着教程全部过一遍就差不多了。...
摘要:利用左侧浮动,右侧盒子通过形成了。三列布局这是比较复杂的布局,适合有复杂操作功能的网页,如各大电商网站。建议升级您的浏览器,或使用等高级浏览器,将会得到更好的体验 在熟悉那些常用的软件、工具后,我们正式开始开发,在前期准备工作之后,我们要做的事情是写页面,也就是网页布局。在w3c、菜鸟、慕课网等等网站上都有基础的 HTML+CSS 知识讲解,在初期学习中,跟着教程全部过一遍就差不多了。...
阅读 3648·2021-11-22 13:52
阅读 3578·2019-12-27 12:20
阅读 2360·2019-08-30 15:55
阅读 2086·2019-08-30 15:44
阅读 2249·2019-08-30 13:16
阅读 551·2019-08-28 18:19
阅读 1859·2019-08-26 11:58
阅读 3414·2019-08-26 11:47