上海消費品網(wǎng)絡(luò)營銷推廣公司長沙seo排名優(yōu)化公司
文章目錄
- CSS 樣式
- 1、Chrome 89 版本期不再支持 `/deep/`，請勿使用嵌套 `/deep/`
- 2、圓角按鈕 button 點擊后出現(xiàn)矩形框線
- 3、怪異模式
- 4、`border` 1 像素在手機(jī)上顯示問題
- 5、文本溢出問題
- JavaScript 腳本
- 1、移動端點擊穿透
- 2、使用`parseInt`時必須補(bǔ)全第二個參數(shù) `radix`
- 3、有關(guān)`Input`標(biāo)簽`capture`屬性
- 4、`setTimeout/setInterval`函數(shù)第一個參數(shù)誤用字符串
- 5、在為變量重置`get`、`valueOf`、`toString`時請謹(jǐn)慎
- 7、`null`是不是`object`
- 8、詭異的參數(shù)
CSS 樣式
1、Chrome 89 版本期不再支持 /deep/，請勿使用嵌套 /deep/
發(fā)現(xiàn)使用 chrome 最新版（v89），有個別樣式出現(xiàn)了問題，排查定位后發(fā)現(xiàn)是有些錯誤地嵌套使用/deep/，在 v88 下是沒問題的，但在 v89 下就出現(xiàn)了問題，不再生效。我們使用 VUE 框架，ElementUI 組件庫，Dialog 控件樣式(SCSS)寫成了：
.my-dialog {/deep/ .el-dialog {/deep/ .el-dialog__body {height: 600px;}}
}
?注意：嵌套使用/deep/是錯誤的，但在之前的版本沒有發(fā)現(xiàn)問題便沒發(fā)現(xiàn)?
chromestatus chromestatu里有：
The /deep/ combinator was a part of Shadow DOM v0, which has been deprecated and removed. Starting in M63, the /deep/ combinator was treated as a no-op, equivalent to a space “ “ combinator. As the code for all of Shadow DOM v0 was removed completely in M89, /deep/ will now throw exceptions in some JS operations, such as querySelectorAll. Simply replace it with “ “ to get pre-M89 behavior back.
翻譯過來的意思是，在 89 之前，chrome 瀏覽器會將/deep/ 當(dāng)作空格字符串來處理，后面就完整刪除 Shadow DOM v0 的內(nèi)容了。
2、圓角按鈕 button 點擊后出現(xiàn)矩形框線
解決辦法：
outline: none;
3、怪異模式
沒有書寫<!doctype html>時會觸發(fā)怪異解析現(xiàn)象。
解決辦法： 請完整書寫<!doctype html>
4、border 1 像素在手機(jī)上顯示問題
原因： 1px在手機(jī)上是使用2dp進(jìn)行渲染，換成 border: 0.5 是不行的！
解決辦法： 通過給元素的before或after偽類設(shè)置border或者height，然后讓偽類利用 css3 的transform的scaleY(0.5)縮放 0.5 像素
5、文本溢出問題
- 單行文本溢出
overflow: hidden;
white-wrap: nowrap;
text-overflow: ellipsis;
- 多行文本溢出
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
/* 3表示第四行溢出 */
-webkit-line-clamp: 3;
JavaScript 腳本
1、移動端點擊穿透
背景： 當(dāng)點擊絕對定位元素的時候，下面的元素雖然被遮蓋，但也被觸發(fā)了。
原因： touchstart 早于 touchend 早于 click。
解決辦法：
- （1）盡量都使用
touch事件來替換click事件。例如用touchend事件(推薦)。 - （2）用 fastclick
- （3）用
preventDefault阻止a標(biāo)簽的click - （4）延遲一定的時間(300ms+)來處理事件 （不推薦）
- （5）以上一般都能解決，實在不行就換成
click事件。
2、使用parseInt時必須補(bǔ)全第二個參數(shù) radix
參考文檔：parseInt
3、有關(guān)Input標(biāo)簽capture屬性
HTML5 官方文檔解釋：capture 屬性用于調(diào)用設(shè)備的攝像頭或麥克風(fēng)。
當(dāng)accept="audio/*"或者accept="video/*"時capture只有以下兩種值：
| 值 | 描述 |
|---|---|
| user | 調(diào)用面向用戶的攝像頭（前置攝像頭）和/或麥克風(fēng) |
| environment | 調(diào)用朝外的攝像頭（后置攝像頭）和/或麥克風(fēng) |
iOS 最遵守遵守 HTML5 規(guī)范，其次是 X5 內(nèi)核，安卓的 webview 基本忽略了 capture。
理想情況下應(yīng)該按照如下開發(fā) webview：
- (1). 當(dāng)
accept="image/*"時，capture="user"調(diào)用前置照相機(jī)，capture="其他值"，調(diào)用后置照相機(jī) - (2). 當(dāng)
accept="video/\*"時，capture="user"調(diào)用前置錄像機(jī)，capture="其他值"，調(diào)用后置錄像機(jī) - (3). 當(dāng)
accept="image/_,video/_"，capture="user"調(diào)用前置攝像頭，capture="其他值"，調(diào)用后置攝像頭，默認(rèn)照相，可切換錄像 - (4). 當(dāng)
accept="audio/*"時，capture="放空或者任意值"，調(diào)用錄音機(jī) - (5). 當(dāng)
input沒有capture時，根據(jù)accppt類型給出文件夾選項以及攝像頭或者錄音機(jī)選項 - (6).
input含有multiple時訪問文件夾可勾選多文件，調(diào)用系統(tǒng)攝像頭或者錄音機(jī)都只是單文件 - (7). 無
multiple時都只能單文件
參考文檔：
- https://w3c.github.io/html-media-capture/
- https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture
- https://caniuse.com/html-media-capture
- https://w3c.github.io/html-media-capture/#examples
- https://stackoverflow.com/questions/21523544/html-file-input-control-with-capture-and-accept-attributes-works-wrong
4、setTimeout/setInterval函數(shù)第一個參數(shù)誤用字符串
原因： 如果你將一個字符串作為setTimeout/setTimeInterval，它會被傳給函數(shù)構(gòu)造函數(shù)并構(gòu)建一個新的函數(shù)。該操作流程很慢而且低效，并導(dǎo)致 bug 出現(xiàn)。
解決辦法： 傳入函數(shù)作為參數(shù)
function loop() {/* skip */
}
setInterval(loop, 1000);
5、在為變量重置get、valueOf、toString時請謹(jǐn)慎
原因： 考慮以下這些情況:
- v === 1 && v === 2，如果重置
v的get方法，這種情況將成立
let i = 1;
Object.defineProperty(window, 'v', {get() {return i++;}
});console.log(v === 1 && v === 2); // true
- v == 1 && v == 2, 如果重置
v的valueOf方法，這種情況將成立
let v = {i: 0,valueOf() {return (this.i += 1);}
};
console.log(v == 1 && v == 2); // true
7、null是不是object
console.log(typeof null); // object
console.log(null instanceof Object); // false
console.log(Object.prototype.toString.call(null)); // [object Null]
8、詭異的參數(shù)
function hello(name) {console.log(arguments[0]); // vickyname = 'world';return 'Hello, ' + arguments[0] + '!';
}console.log(hello('Rodey')); // Hello, world!
原因： name形參并非是arguments類數(shù)組對象元素的引用。