web前端面试题@十八（移动端1px问题，为什么会有？如何解决？typeof和instanceof相同点与不同点？）

一、移动端1px问题，为什么会有？如何解决？

为什么移动端会产生1px问题呢?

因为UI设计师在最初设计的时候使用的尺寸是按照640x960设计的，前端写的时候是按照320x480写的，写1px(css)，浏览器自动变成2px(真实像素)。

那么前端工程师为什么不能直接写0.5px(css)呢？

因为在老版本的系统里写0.5px(css)的话，会被浏览器解读为0px(css)，就没有边框了。不过在新版的系统里，已经开始逐渐支持0.5px(css)这种写法。所以如果设计师在大图上设计了一个1px(真实像素)的线的话，前端工程师直接除以2，写0.5px(css)就好了。

具体解决方案有哪些？

a.小数值

div { border: 1px solid #000;}

@media (-webkit-min-device-pixel-ratio: 2) { div { border: .5px solid #000; }}

b.border-image（将图片规定为包围 div 元素的边框）

{

    border-width: 1px 0px;

    -webkit-border-image: url(border.png) 2 0 stretch;

    border-image: url(border.png) 2 0 stretch;

}

c.background-img渐变

{

background:

linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat, linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat, linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;

}

d.box-shadow（向元素添加阴影）

{

    -webkit-box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);

    box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);

}

e.设置 Viewport

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

f.transform:scale(0.5)（旋转元素）

div { height: 1px; background: #000; transform: scaleY(0.5); transform-origin: 0 0;}

二、typeof和instanceof相同点与不同点

在javascript中，判断一个变量的类型可以用typeof

(1)数字类型、typeof返回的值是number。比如说：typeof(1)，返回值是number

(2)字符串类型，typeof返回的值是string。比如typeof(“123”返回值时string)

(3)布尔类型，typeof返回的值是boolean。比如typeof(true)返回值时boolean

(4)对象、数组、null返回的值是object。比如typeof(window)，typeof(document)，typeof(null)返回的值都是object

(5)函数类型，返回的值是function。比如：typeof(eval)，typeof(Date)返回的值都是function。

(6)不存在的变量、函数或者undefined，将返回undefined。比如：typeof(abc)、typeof(undefined)都返回undefined

在javascript中，instanceof用于判断某个对象是否被另一个函数构造。

两者的关系？

使用typeof运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回”object”。

ECMAScript引入了另一个Java运算符instanceof来解决这个问题。

相同点：Instanceof运算符与typeof运算符相似，用于识别正在处理的对象的类型。

不同的是：instanceof方法要求开发者明确地确认对象为某特定类型

在javascript中，判断一个变量的类型可以用typeof