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的值就能夠解決該問題了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。