首次写iPad布局感想(H5)
时间:2020-05-14
本文章向大家介绍首次写iPad布局感想(H5),主要包括首次写iPad布局感想(H5)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一直做前端工作,却从来没有开发过平板的项目,想来也是有遗憾的,孰知,新公司的第二个项目就是要适配平板,刚开始是懵的,对于兼容,感觉是自己的短板,但庆幸的是这一版只需要兼容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;
原文地址:https://www.cnblogs.com/10manongit/p/12890490.html
- PaddlePaddle发布新版API,简化深度学习编程
- 13(01)总结StringBuffer,StringBuilder,数组高级,Arrays,Integer,Character
- thymeleaf模板引擎调用java类中的方法(附源码)
- 由hugepage设置导致的数据库事故(r4笔记第28天)
- 判断js引擎是javascriptCore或者v8
- Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)
- 同样的sql执行结果不同的原因分析 (r4笔记第27天)
- 情感分析的新方法,使用word2vec对微博文本进行情感分析和分类
- 垂直属性
- Spring+SpringMVC+MyBatis+easyUI整合进阶篇(二)RESTful API实战笔记(接口设计及Java后端实现)
- 13(02)总结StringBuffer,StringBuilder,数组高级,Arrays,Integer,Character
- Mybatis-Generator生成Mapper文件中<if test="criteria.valid">的问题解答
- Java开源博客My-Blog之mysql容器重复初始化的严重bug修复过程
- 负margin的原理以及应用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ES主分片和副本数据大小不一样的情况
- 关于kibana的可视化可能都在这篇文章里了
- ES分页看这篇就够了
- ES系列之原来查看文档数量有这么多姿势
- ES系列之嵌套文档和父子文档
- ES系列之一文带你避开日期类型存在的坑
- ES系列之原来ES的聚合统计不准确啊
- fastjson远程代码执行漏洞问题分析
- 数据库连接池的原理没你想得这么复杂
- 你真的会用volatile吗
- 你真的了解LinkedBlockingQueue的put,add和offer的区别吗
- 关于Java使用groupingBy分组数据乱序问题
- 详解 java CompletableFuture
- 从一个问题来解释下什么是mysql的可重复读
- 每个人都用得到的频数分布直方图