前端提升（13） 之 移動端1px問題，爲什麼會有？如何解決？ + typeof和instanceof相同點與不同點 + JS單線程如何改多線程？

導航

1、 移動端1px問題，爲什麼會有？如何解決？

1、移動端1px問題，爲什麼會有？如何解決？

因爲在移動端，由於屏幕分辨率的不同，現在分爲一倍屏、二倍屏、三倍屏。在不同的分辨率上，有可能一像素被渲然成二個像素點或者三個像素點，所以在實際寫代碼的時候，我們寫的 border: 1px solid #000; 可能實際被渲然爲 2px/3px；

就像我有個一個紋身，我變胖了後，紋身也增大了一樣。

（1）使用border-image來代替border

.border-image-1px {
    border-width: 1px 0px;
    -webkit-border-image: url("border.png") 2 0 stretch;
    border-image: url("border.png") 2 0 stretch;
}

（2）先使用僞類元素實現邊框效果，然後通過媒體查詢來操控transform: scale來適配不同分辨率

.border-bottom{
    position: relative;
}
.border-bottom::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

3、使用viewport +rem
設置meta標籤

<meta
     name="viewport"
     id="WebViewport"
     content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/> 

並在js中通過判斷當前是一倍屏還是二倍屏、三倍屏，來動態的設置meta標籤的內容

function rem() {
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    let viewport = document.querySelector("#WebViewport")
    if (window.devicePixelRatio == 1) {
        viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
    } 
    if (window.devicePixelRatio == 2) {
        viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
    } 
    if (window.devicePixelRatio == 3) {
        viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
    } 
}
rem()
window.onresize = rem;
// 文章由 郝晨光 整理，未經同意禁止轉載

2、typeof和instanceof相同點與不同點

typeof：
用於判斷數據類型，返回值爲6個字符串，分別爲string、Boolean、number、function、object、undefined。

  var a = [34,4,3,54],
        b = 34,
        c = 'adsfas',
        d = function(){console.log('我是函數')},
        e = true,
        f = null,
        g,
        h = new Date()
        i = eval('1+2');

        console.log(typeof(a));//object
        console.log(typeof(b));//number
        console.log(typeof(c));//string
        console.log(typeof(d));//function
        console.log(typeof(e));//boolean
        console.log(typeof(f));//object
        console.log(typeof(g));//undefined
        console.log(typeof(h));//function
        console.log(typeof(i));//function

instanceof：
1.返回值爲布爾值;
2. instanceof 用於判斷一個變量是否屬於某個對象的實例。

var arr = new Array();
console.log(arr instanceof Array) // true
console.log(arr instanceof Object) //true
console.log(arr instanceof Function) //false
console.log(arr) // 看下面

隱式原型鏈_proto_指向prototype指向原型對象

instanceof用來判斷對象，代碼形式爲obj1 instanceof obj2（obj1是否是obj2的實例），obj2必須爲對象，否則會報錯！其返回值爲布爾值。
instanceof可以對不同的對象實例進行判斷，判斷方法是根據對象的原型鏈依次向下查詢，如果obj2的原型屬性存在obj1的原型鏈上，（obj1 instanceof obj2）值爲true。

3、JS單線程如何改多線程？

這個不會，俺也沒理解，沒想到吧。其實生活就是這樣，總是在沒理解和沒想到之間徘徊。