前端提升（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单线程如何改多线程？

这个不会，俺也没理解，没想到吧。其实生活就是这样，总是在没理解和没想到之间徘徊。