iphone手机中对于html和css的一些特殊处理

时间 2019-11-18

标签 iphone 手机对于 html css 一些特殊处理栏目 iPhone 繁體版

原文原文链接

1.iphone safari iso系统不兼容：hover的解决办法：

　　方法一：html

　　　　a:hover设置的样式在IOS系统的浏览器内显示不出来，看来是IOS系统的移动设备中，须要在按钮元素或者是body/html上绑定一个touchstart事件，才能激活：active状态。浏览器

　　　　代码以下：iphone

document.body.addEventListener('touchstart',function(){});

　　　　或者给body添加ontouchstart事件：　　　　this

<body ontouchstart>

　　方法二：spa

　　　　既然iphone不支持hover，用js解决，写一个单独的类，好比.active

.active{    background-color: #eee;}

　　　　/*****************code

　　　　　在鼠标进入li的时候：htm

　　　　　　1. 去除其它"li"的 ".active"blog

　　　　　 2. 给当前"li"添加类".active"seo

　　　　********************/ 事件

　　具体代码以下:

1 $(function(){     
2     $('ul li').mouseover(function(){       
3       $('ul li').removeClass('active');         
4       $( this).addClass('active')     
5     }) 
6 })

2.iphone对于margin不起做用

情景:当页面有footer固定在iphone手机的浏览器的底部的时候,在滑动的过程当中没法达到页面的底部,总有一部份内容会被遮住

主要问题:iphone的默认浏览器自动不识别margin的值,也能够说是自动忽略该值

解决办法:将margin的值修改为padding的值就能够解决该问题了