1.H5网页touch滑动的时候在苹果手机上出现不流畅的问题

-webkit-overflow-scrolling 用来控制元素在移动设备上是否使用滚动回弹效果.

解决办法:给所有网页添加如下样式

body {
overflow:auto; /* 用于 android4+,或其他设备 */
-webkit-overflow-scrolling:touch; /* 用于 ios5+ */
}

说明:

-webkit-overflow-scrolling: touch; 当手指从触摸屏上移开,会保持一段时间的滚动

-webkit-overflow-scrolling: auto; 当手指从触摸屏上移开,滚动会立即停止

2. css 苹果手机按钮默认样式如何去掉

input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}

textarea {  -webkit-appearance: none;}

3. 如果还有圆角的问题,

.button{ border-radius: 0; }

 4.苹果手机不支持box-shadow属性
如果先给input写边框,用 border:1px solid #ccc;

5、去除Chrome等浏览器文本框默认发光边框

input:focus, textarea:focus {outline: none;}

6.去掉高光样式:

input:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);

-webkit-user-modify:read-write-plaintext-only;}

当然这样以来,当文本框载入焦点时,所有浏览器下的文本框的边框都不会有颜色上及样式上的变化了,这样的话,当文本框载入焦点时,边框颜色就会变为橙色,给用户一个反馈。

7、去除IE10+浏览器文本框后面的小叉叉,只需下面一句就ok了

input::-ms-clear {display: none;}

8.H5页面写出来,在chrome中出现如下错误,只需添加如下css即可解决

.

*{touch-action: pan-y;}

ios系统的css兼容问题处理和iOS上网页滑动不流畅问题的更多相关文章

  1. 解决iOS上网页滑动不流畅问题

    body { overflow:auto; /* 用于 android4+,或其他设备 */ -webkit-overflow-scrolling:touch; /* 用于 ios5+ */ }说明: ...

  2. iOS系统及客户端软件测试的基础介绍

    iOS系统及客户端软件测试的基础介绍 iOS现在的最新版本iOS5是10月12号推出,当前版本是4.3.5 先是硬件部分,采用iOS系统的是iPad,iPhone,iTouch这三种设备,其中iPho ...

  3. android系统和ios系统是如何实现推送的,ios为什么没有后台推送

    ios系统为什么没有后台推送? iOS 为了真正地为用户体验负责,不允许应用在后台活动.有了这个限制,但是对于终端设备,应用又是有必要“通知”到达用户的,随时与用户主动沟通起来的(典型的如聊天应用). ...

  4. 浅谈Android和IOS系统的差异

    总结:事件响应级别.GPU加速.进程前后台.代码运行速度.内存管理机制. 进程管理机制.内存管理机制.cpu效率.GPU加速.事件响应级别. 1.    渲染机制不同 IOS的UI渲染采用实时优先级, ...

  5. H5在部分苹果手机IOS系统下重力感应无效

    原因不明,反正在IOS系统12.2以上的普通的H5移动端网页的重力感应功能无反应 解决方法: 把链接改为HTTPS,经过测试,12.2系统以上的如果你的链接是HTTP的,重力感应在网页上是没调起的,改 ...

  6. iOS开发之结合asp.net webservice实现文件上传下载

    iOS开发中会经常用到文件上传下载的功能,这篇文件将介绍一下使用asp.net webservice实现文件上传下载. 首先,让我们看下文件下载. 这里我们下载cnblogs上的一个zip文件.使用N ...

  7. ios系统的Date的兼容问题

    内容来源网上,自己记录下 问题1: var date =new Date(); 这个是获取当前系统时间的对象,在各端都可以 但是: var date =new Date("2017-01-2 ...

  8. IOS系统兼容input keyup事件

    最近在做移动端模糊搜索功能,js监听input的keyup事件,在chrom模拟器和android手机环境运行都没有问题,到了ios手机却出现bug,没法实现功能: 查了好一会资料,发现keyup事件 ...

  9. IOS系统不兼容position: fixed;属性的解决方案

    position: fixed;属性在IOS系统手机上会有很明显的抖动,解决方式: 只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;o ...

  10. uni-app 时间格式问题 new Date(str) IOS系统跟Android系统不兼容

    今天做了一个需求,要在列表中把后台返回来的时间给显示出来,使用 new Date(str)  在微信开发者工具上显示是没有问题的,然后在IOS系统上显示是NAN. 原因是 IOS系统只识别 " ...

随机推荐

  1. Android相对布局(来自菜鸟教程)

  2. Vue入门笔记二

    <Vue.js项目实战> 开发所需的包称为开发依赖,应该使用--save-dev标志进行安装 应用运行需要的直接依赖应该使用--save标志进行安装 模板 使用Pug Pug(以前称为Ja ...

  3. OpenHarmony父子组件单项同步使用:@Prop装饰器

      @Prop装饰的变量可以和父组件建立单向的同步关系.@Prop装饰的变量是可变的,但是变化不会同步回其父组件. 说明: 从API version 9开始,该装饰器支持在ArkTS卡片中使用. 概述 ...

  4. Qt调用摄像头二,Pro版

    本示例,为纯Qt调用摄像头,功能会比版本一要多一点:打开摄像头,设置参数,完整拍照,框选拍照,切换分辨率,旋转,水平镜像,垂直镜像,放大,缩小 上一个版本,使用的显示窗口直接显示出摄像头画面,所以可操 ...

  5. 外屏和宽屏浪费了?HarmonyOS折叠屏设计规范教你用起来

    原文:https://mp.weixin.qq.com/s/7_mdRom7sCA3Z65ih6W3xw,点击链接查看更多技术内容. 这几年折叠屏手机很火,我们针对使用HarmonyOS的折叠屏手机提 ...

  6. jenkins 持续集成和交付 —— 邮箱服务器配置(九)

    前言 简介邮箱服务器的配置,让jenkins在构建完成后,能有一个邮箱结果通知到我们,这样就不用每次盯着jenkins 看是否完成了. 正文 1.安装插件 安装下面这个插件. Email Extens ...

  7. nginx 如何代理websocket

    前言 下面是配置nginx websocket 的代码. # HTTPS server map $http_upgrade $connection_upgrade { default upgrade; ...

  8. Android Studio制作简单登录界面

    实现目标 应用线性布局设计登录界面,要求点击输入学号时弹出数字键盘界面,点击输入密码时弹出字母键盘,出现的文字.数字.尺寸等全部在values文件夹下相应.xml文件中设置好,使用时直接引用.当用户名 ...

  9. 操作流程分享:HDMI输入SIL9293C配套NR-9 2AR-18的国产GOWIN开发板

    1. 产品概述 HDMI 输入配套板是用于 GOWIN NR-9 和 2AR-18 的开发板配套的 HDMI 输出板子.最 大分辨率支持 1920*1080P,60Hz 刷新率,24 位 RGB 色彩 ...

  10. Django框架——图书管理系统、聚合查询、分组查询、F与Q查询

    图书管理系统 1.表设计 先考虑普通字段再考虑外键字段 数据库迁移.测试数据录入 2.首页展示 3.书籍展示 4.书籍添加 5.书籍编辑 后端如何获取用户想要编辑的数据.前端如何展示出待编辑的数据 6 ...