整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
今天就來聊聊在為了您更好的體驗，本文章聊聊如何僅支持谷歌瀏覽器訪問查看頁面？這篇文章中提到的瀏覽器兼容問題，以此篇文章來證明自己并非不了解瀏覽器兼容性問題，而是當時其他因素導致選擇了一刀切的方法來處理需求（我就是一個不粘鍋）。
嘿，xdm~既然點進來了，不妨就繼續看下去吧^_^
所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。
上面的定義就是大白話，我們來看看來自百度百科的權威解釋：瀏覽器兼容性問題又被稱為網頁兼容性或網站兼容性問題，指網頁在各種瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的兼容問題。在網站的設計和制作中，做好瀏覽器兼容，才能夠讓網站在不同的瀏覽器下都正常顯示。而對于瀏覽器軟件的開發和設計，瀏覽器對標準的更好兼容能夠給用戶更好的使用體驗。
造成瀏覽器兼容性問題的根本原因就是各瀏覽器使用了不同的內核，并且它們處理同一件事情的時候思路不同。
怎么理解上述文字？即：不同瀏覽器使用的內核及所支持的HTML等網頁語言標準不同，以及用戶客戶端的環境不同（如分辨率不同）造成了顯示效果不能達到理想效果。
前端開發經常需要檢查瀏覽器的兼容性，這里推薦(Can I Use)這個查詢網站。它是一個針對前端開發人員定制的一個查詢CSS、JS、HTML5、SVG在主流瀏覽器中特性和兼容性的網站，可以很好的保證網頁在瀏覽器中的兼容性。有了這個工具我們就可以快速地了解到代碼在各個瀏覽器中的兼容情況了，強烈推薦一波，大家趕緊去體驗吧?！界面效果如下圖所示：
工具只能給我們顯示查詢的特性在不同瀏覽器上的兼容情況，至于如何解決兼容問題還得看下述的解決辦法→
1、不同瀏覽器的標簽默認的內外邊距不同
解決方案：*{margin: 0; padding: 0;}
其實清除瀏覽器自帶的默認樣式，每個前端開發者所用的方法大同小異，這里給出我選用的清除默認樣式的重置樣式代碼：
/**
* 該文件用于清除瀏覽器樣式
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
padding:0;
margin:0;
border:0;
outline: 0;
font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
word-wrap:break-word;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
-webkit-tap-highlight-color:rgba(255,255,255,0);
}
ul, ol {
list-style-type: none;
}
textarea {
resize: none;
}
/*去除input button默認樣式*/
input, button, textarea {
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(255, 225, 225, 0);
padding: 0;
border: 0;
outline: 0;
}
// 修改placeholder屬性默認文字顏色
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
/* WebKit browsers */
color: #999;
}
input:-moz-placeholder, textarea:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #999;
}
input::-moz-placeholder, textarea::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #999;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #999;
}除了自己定義清除默認樣式的代碼，也可選擇引用別人寫好的成熟插件Normalize.css來清除默認樣式；
2、圖片加a標簽在IE9中會有邊框
解決方案：img{border: none;}
3、IE6及更低版本浮動元素，浮動邊雙倍邊距
解決方案：不使用margin，使用padding
4、IE6及更低版本中，部分塊元素擁有默認高度
解決方案：給元素設置font-size: 0;
5、a標簽藍色邊框
解決方案：a{outline: none;}
6、IE6不支持min-height屬性
解決方案：{min-height: 200px; _height: 350px;}
7、IE9以下瀏覽器不能使用opacity
解決方案：Firefox/Chrome/Safari/Opera瀏覽器使用opacity；IE瀏覽器使用filter
opacity: 0.7; /*FF chrome safari opera*/
filter: alpha(opacity:70); /*用了ie濾鏡,可以兼容ie*/8、IE6/7不支持display:inline-block
解決方案：{display: inline-block; *display: inline;}
9、cursor兼容問題
解決方案：統一使用{cursor: pointer;}
10、IE6/7中img標簽與文字放一起時，line-height失效的問題
解決方案：文字和<img>都設置float
11、table寬度固定，td自動換行
解決方案：table設置 {table-layout: fixed}，td設置 {word-wrap: break-word}
12、相鄰元素設置margin邊距時，margin將取最大值，舍棄小值
解決方案：不讓邊距重疊，可以給子元素加一個父元素，并設置該父元素設置：{overflow: hidden}
13、a標簽css狀態的順序
解決方案：按照link--visited--hover--active的順序編寫
14、IE6/7圖片下面有空隙的問題
解決方案：img{display: block;}
15、ul標簽在Firefox中默認是有padding值的，而在IE中只有margin有值
解決方案：ul{margin: 0;padding: 0;}
16、IE中li指定高度后，出現排版錯誤
解決方案：設置line-height
17、ul或li浮動后，顯示在div外
解決方案：清除浮動；須在ul標簽后加<div style="clear:both"></div>來閉合外層div
18、ul設置float后，在IE中margin將變大
解決方案：ul{display: inline;}，li{list-style-position: outside;}
19、li中內容超過長度時，用省略號顯示
li{
width: 200px;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
}20、div嵌套p時，出現空白行
解決方案：li{display: inline;}
21、IE6默認div高度為一個字體顯示的高度
解決方案：{line-height: 1px;}或{overflow: hidden;}
22、在Chrome中字體不能小于10px
解決方案：p{font-size: 12px; transform: scale(0.8);}
23、谷歌瀏覽器上記住密碼后輸入框背景色為黃色
input{
background-color: transparent !important;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
-webkit-text-fill-color: #333 !important;
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
background-color: transparent !important;
background-image: none !important;
transition: background-color 5000s ease-in-out 0s;
}24、CSS3兼容前綴表示
寫法 | 內核 | 瀏覽器 |
-webkit- | webkit渲染引擎 | chrome/safari |
-moz- | gecko渲染引擎 | Firefox |
-ms- | trident渲染引擎 | IE |
-o- | opeck渲染引擎 | Opera |
如：
.box{
height: 40px;
background-color: red;
color: #fff;
-webkit-border-radius: 5px; // chrome/safari
-moz-border-radius: 5px; // Firefox
-ms-border-radius: 5px; // IE
-o-border-radius: 5px; // Opera
border-radius: 5px;
}1、事件對象的兼容
e = ev || window.event
2、滾動事件的兼容
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
3、阻止冒泡的兼容
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble=true;
}4、阻止默認行為的兼容
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}5、添加事件監聽器的兼容
if (target.addEventListener) {
target.addEventListener("click", fun, false);
} else {
target.attachEvent("onclick", fun);
}6、ajax創建對象的兼容
var xhr = null；
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft XMLHTTP");
} 7、鼠標按鍵編碼的兼容
function mouse (ev) {
var e = ev || window.event;
if (evt) {
return e.button;
} else if (window.event) {
switch (e.button) {
case 1: return 0;
case 4: return 1;
case 2: return 2;
}
}
}8、在IE中，event對象有x，y屬性，Firefox中與event.x等效的是event.pageX，而event.pageX在IE中又沒有
x = event.x ? event.x : event.pageX;
9、在IE下，event對象有srcElement屬性，但是沒有target屬性；Firefox下，event對象有target屬性，但是沒有srcElement屬性
var source = ev.target || ev.srcElement;
var target = ev.relatedTarget || ev.toElement;10、在Firefox下需要用CSS禁止選取網頁內容，在IE用JS禁止
-moz-user-select: none; // Firefox
obj.onselectstart = function() {return false;} // IE11、innerText在IE中能正常工作，但在FireFox中卻不行
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('element').innerText = "IE";
} else {
document.getElementById('element').textContent = "Firefox";
}12、在Firefox下，可以使用const關鍵字或var關鍵字來定義常量；在IE下，只能使用var關鍵字來定義常量
解決方案：統一使用var關鍵字來定義常量
1、禁止iOS識別長串數字為電話
解決方案：<meta content="telephone=no" name="format-detection" />
2、禁止iOS彈出各種操作窗口
解決方案：-webkit-touch-callout:none
3、禁止Android手機識別郵箱
解決方案：<meta content="email=no" name="format-detection" />
4、禁止iOS和Android用戶選中文字
解決方案：-webkit-user-select:none
5、iOS下取消input在輸入的時候英文首字母的默認大寫
解決方案：<input autocapitalize="off" autocorrect="off" />
6、Android下取消輸入語音按鈕
解決方案：input::-webkit-input-speech-button {display: none}
7、在移動端修改難看的點擊的高亮效果，iOS和安卓下都有效
解決方案：* {-webkit-tap-highlight-color:rgba(0,0,0,0);}
8、iOS下input為type=button屬性disabled設置true，會出現樣式文字和背景異常問題
解決方案：使用opacity=1;
9、input為fixed定位，在iOS下input固定定位在頂部或者底部，在頁面滾動一些距離后，點擊input(彈出鍵盤)，input位置會出現在中間位置
解決方案：內容列表框也是fixed定位，這樣不會出現fixed錯位的問題
10、移動端字體小于12px使用四周邊框或者背景色塊，部分安卓文字偏上bug問題
解決方案：可以使用整體放大1倍(width、height、font-size等等)，再使用transform縮放
11、在移動端圖片上傳圖片兼容低端機的問題
解決方案：input 加入屬性accept="image/*" multiple
12、在Android上placeholder文字設置行高會偏上
解決方案：input有placeholder情況下不要設置行高
13、overflow: scroll或auto；在iOS上滑動卡頓的問題
解決方案:加入-webkit-overflow-scrolling: touch;
14、iOS中日期如：2022-02-22 00:00:00格式的時間轉時間戳不成功
解決方案：需要將時間中的'00:00:00去除之后才能轉為時間戳'
15、iOS中需要將時間格式轉為/，如：2022/02/22
let date = '2022-02-22';
let dateStr = date.replace(/-/g, '/'); // 2022/02/2216、移動端click300ms延時響應
解決方案：使用Fastclick
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );17、移動端1px邊框問題
解決方案：原先元素的border去掉，然后利用:before或者:after重做border，并transform的scale縮小一半，原先的元素相對定位，新做的border絕對定位
.border-1px{
position: relative;
border:none;
}
.border-1px:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}至此，關于瀏覽器兼容性問題的相關知識和解決方案就聊完了，最后還穿插了關于移動端兼容的問題描述，肯定還有很多沒有總結到的兼容性問題，希望xdm在下方評論↘提供。
看文至此，順手點個贊再走唄，3Q^_^
伙伴們，如果覺得本文對你有些許幫助，點個或者?個關注在走唄^_^ 。另外如果本文章有問題或有不理解的部分，歡迎大家在評論區評論指出，我們一起討論共勉。
上面gif動圖所示，這是一個很炫酷的文字動畫效果，文字的每個字符呈波浪式的擴散式展開。本次文章將解讀如何實現這個炫酷的文字效果。
基于以上的截圖效果可以分析出以下是本次要實現的主要幾點：
核心代碼實現需要基于 以下兩個庫：
Letterize.js是一個輕量級的JavaScript庫，它可以將文本內容分解為單個字母，以便可以對每個字母進行動畫處理。這對于創建復雜的文本動畫效果非常有用。
使用Letterize.js，你可以輕松地將一個字符串或HTML元素中的文本分解為單個字母，并為每個字母創建一個包含類名和數據屬性的新HTML元素。這使得你可以使用CSS或JavaScript來控制每個字母的樣式和動畫。
anime.js是一個強大的JavaScript動畫庫，它提供了一種簡單而靈活的方式來創建各種動畫效果。它可以用于HTML元素、SVG、DOM屬性和JavaScript對象的動畫。
通過使用Letterize.js以便可以對每個字母進行動畫處理，再結合anime.js即可創建各種動畫效果。本文不對這兩個庫做更多的詳細介紹，只對本次特效實現做介紹，有興趣的可以看看官網完整的使用文檔。
html就是簡單的本文標簽，也不需要額外的樣式，只需要在外層使用flex布局將內容居中，因為本文的長度都是一樣的，所以完成后的文本內容就像一個正方形。
<div>
<div class="animate-me">
letterize.js&anime.js
</div>
<div class="animate-me">
anime.js&letterize.js
</div>
......
<div class="animate-me">
letterize.js&anime.js
</div>
<div class="animate-me">
anime.js&letterize.js
</div>
</div>
const letterize = new Letterize({
targets: ".animate-me"
});
const animation = anime.timeline({
targets: letterize.listAll,
delay: anime.stagger(100, {
grid: [letterize.list[0].length, letterize.list.length],
from: "center"
}),
loop: true
});
animation
.add({
scale: 0.5
})
此時的效果如下所示：
animation
.add({
scale: 0.5
})
.add({
letterSpacing: "10px"
})
此時的效果如下所示：
.add({
scale: 1
})
.add({
letterSpacing: "6px"
});
本文通過 Letterize.js + Anime.js 實現了一個很炫酷的文字動畫效果，文字的每個字符呈波浪式的擴散式展開和收起。anime.js還有很多的參數可以嘗試，有興趣的朋友可以嘗試探索看看~
看完本文如果覺得有用，記得點個贊支持，收藏起來說不定哪天就用上啦～
動畫效果發布者 Wojciech Krakowiak ：https://codepen.io/WojciechWKROPCE/pen/VwLePLy
原文鏈接：https://juejin.cn/post/7300847292974071859
是否曾經試著點擊或點擊一個元素(例如:按鈕、鏈接)，并且注意到只有單擊該元素的特定區域，它才會響應？
必生這種情況是因為可點擊區域未應用于整個元素。為了更加清楚，請參見下圖，左圖可點擊區別(圈紅部分)明顯比右圖的小很多，所以右圖的實現用戶體驗會更好。
對于本文，會介紹一些事例，并通過事例演示如何增加可點擊區別，提高用戶體驗。
WCAG全稱Web Content Accessibility Guidelines 網頁內容無障礙瀏覽準則，簡單的說就是為了方便殘障人士（包括低視患者，盲人，聾人，學習障礙，行動不便，認知障礙....）訪問Web內容而制定的相關標準，可以使網站更加人性化。
舉個例子，在WCAG準則2.3.2中規定：網頁不包含任何閃光超過3次/秒的內容。
用戶應該能夠使用臺式機/筆記本電腦上的鍵盤以及移動設備或平板電腦上的觸摸屏來操作輸入。不要在移動設備屏幕上將按鈕設置得太小，以免按下正確的按鈕。觸摸目標的最小尺寸最好至少為44 x 44像素。
**費茲法則（Fitts law)**是一個人機互動以及人體工程學中人類活動的模型；它預測了快速移動到目標區域所需的時間是目標區域的距離和目標區域大小的函數。
在下面的圖中，我模擬了兩個按鈕的不同情況。在左側，按鈕更小，更遠，用戶需要更多的時間與它互動。在右側，按鈕大小更大，更接近于它的同級輸入元素，這將使交互更容易、更快。
接著，我們再來看看一些更加真實例子。注意：記住WCAG準則 和費茲法則 的概念。
在需要時使用實際真實<button>(包含可點擊區域)非常重要。下面的示例來自我使用的在線銀行系統：
<div class="navig next" onclick="validateLogin()">Next</div>這是上面按鈕的HTML的GIF圖像。我把鼠標懸停在按鈕上，光標仍然是一個指針，這很好。不過，我也可以選擇文本和懸停時，有一個文本光標!如果使用了正確的元素，就不會發生這種情況。
當使用HTML<button>元素時，會獲得下面效果：
有些元素，我們需要添加 padding，原因有二：
之前在做導航的時候，犯了一個錯誤，應該是給 a 標簽添加 padding 而不是 li:
<nav>
<ul>
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><nav href="#">Products</nav></li>
<li class="nav-item"><a href="#">Store</a></li>
<li class="nav-item"><a href="#">Team</a></li>
</ul>
</nav>
// css
.nav-item {
padding: 12px 16px;
}基于上面的HTML和CSS，可點擊的區域將只是文本，如下圖所示：
正確的方法是在a 標簽本身上添加padding。請注意，默認情況下，padding 需要塊元素才有效，而 a 標簽是行內元素，所以可以給 a 標簽設置block，inline-element或 flex。
.nav-item a {
display: block;
padding: 12px 16px;
}添加了上面的樣式后，可點擊的效果如下：
假設可點擊區域如下所示：
這種體驗不是很好，鼠標或手指指向屏幕上如此小的目標會比較難。在下圖中，它的可點擊區域更大并且更易于交互。
事例源碼：https://codepen.io/shadeed/pen/PMygee
當存在復選框或單選按鈕元素時，我希望可以單擊它或關聯的標簽來激活/禁用它。
從用戶體驗的角度來看，這是難以訪問和糟糕的。在 HTML 中，可以使用for屬性將標簽與輸入框綁定在一起。
<input type="checkbox" id="option1">
<label for="option1">Option 1</label>或者可以將輸入框放置在標簽內：
<label for="option1">
Option 1
<input type="checkbox" id="option1">
</label>然后，在<label>元素上添加padding，以使可點擊區域變大。這樣，問題得以解決，整個復選框或單選按鈕都是可單擊的，如下圖所
對于帶有類別的頁面，有時我會注意到列表鏈接沒有擴展到其父頁面的整個寬度。也就是說，可點擊區域僅在文本上，如下圖所示：
解決方法：
.nav-item a {
/*Other styles*/
padding: 12px 16px;
display: block;
}添加后，如下所示：
在最近的Twitter更新中，導航設計在可點擊區域大小方面存在問題。最初，它僅與文本相關，如下面的屏幕截圖所示，但他們在收到反饋后將其修復。
在某些情況下，需要在章節標題的遠端添加“查看更多”按鈕或箭頭。在下面的示例中，我將箭頭放置在假圓中，以便可以正確地使箭頭居中。
通常情況下，箭頭周圍的間距可以使用padding或width和height。
僅通過改變元素的寬度和高度或使用padding，并不總是能夠使可點擊區域變大，這時候就需要偽元素救場了。
這個想法是，偽元素屬于其父元素，因此當我們創建具有特定寬度和高度的偽元素時，它將充當其父元素的單擊/觸摸/懸停區域。
在下圖中，我在菜單按鈕中添加了:after偽元素:
.menu-2:after {
content: "";
position: absolute;
left: 55px;
top: 0;
width: 50px;
height: 50px;
background: #e83474;
/*Other styles*/
}事例源碼：https://codepen.io/shadeed/pen/BXXjEg?editors=0100
作者：Ahmad Shadded 譯者：前端小智 來源：css-tricks
原文：https://css-tricks.com/enhancing-the-clickable-area-size/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
