2016.06 第一周 群问题分享

HTML+CSS

meta标签的viewport属性说明

2016.05.30~2016.06.03

核心概念

viewport（视口）

参考答案

1. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
2. width=device-width 是设置视口宽度为设备的宽度，还可以固定视口的宽度，例如： width=640 则是640px的宽度；
3. initial-scale: 初始的缩放比例 ；
4. minimum-scale: 允许用户缩放到的最小比例
5. maximum-scale: 允许用户缩放到的最大比例
6. user-scalable: 用户是否可以手动缩放

理解viewport的主要参数的设置是为了让网页更好的在移动端设备中正常显示，并且让用户无法缩放网页；

提示：上面的例子对viewport的设置是带全部参数的，一般常用的有user-scalable=no、width=device-width、initial-scale=1.0，可以不设置 minimum-scale=1.0 和 maximum-scale=1.0 来强制禁止缩放了。

下图是百度移动端首页viewport的设置

下图是天猫移动端首页viewport的设置

下图是淘宝移动端首页viewport的设置（viewport缩放值是根据不同设备来进行设置）

下图是京东移动端首页viewport的设置

为什么要在img标签上设置图片的宽高

2016.05.30~2016.06.03

核心概念

浏览器运行机制

参考答案

当浏览器加载页面的HTML代码时，有时候需要在图片下载完成前就对页面进行布局。如果HTML里的图片没有指定尺寸（宽和高），或者代码描述的尺寸与实际图片的尺寸不相符合时，浏览器则要在图片下载完成后再次“回溯”该图片并重新显示，这会消耗额外时间。所以，最好为页面里的每一张图片都指定尺寸，不管是在页面HTML里的标签，还是在CSS里（在img标签上设置宽高，会影响页面的扩展性，所以根据需求来进行设置）。

<img src="hello.png" width="400px" height="300px">

下图是淘宝PC端页面对大张图片大小的设置

下图是京东PC端页面对图片大小的设置

怎么让iPhone手机自动识别电话号码时，电话号码不改变颜色

2016.05.30~2016.06.03

核心概念

meta标签、a标签

参考答案

页面头部添加meta标签来禁止iPhone手机自动识别电话号码

<meta name="format-detection" content="telephone=no">

在a标签里面的href属性加个tel来实现拨打电话功能

<div class="contacts">联系人：<a href="tel:18888888888">18888888888</a></div>

在iPhone手机下，如果页面中有一串数字（可能是电话号码），它会被自动识别出来，认为它是电话号码，点击数字就能实现拨打电话功能，但是那串数字的颜色会改变。

加了meta标签来禁止iPhone手机自动识别的功能，这样页面中里面的数字不会被识别，数字（数字被识别成电话号码）的颜色就不会改变了。这样的话我们要实现拨打电话的功能该怎么办呢？很简单，只要在a标签的href属性里面加个tel就能实现了。

JavaScript

null和undefined有什么区别

2016.05.30~2016.06.03

核心概念

JS基本数据类型

参考答案

字面的含义

从字面上来理解undefined和null其实相对比较简单，undefined表示的是声明一个变量之后我们并没有给它定义内容。而null表示的是有定义，定义的是一个空对象。

if语句中的状态

将undefined和null均作为if语句的条件时，我们会发现，两者均被转换成了布尔值false。看下面的实例：

<script>
    if (undefined) {
        console.log('undefined为真 - HTML5学堂');
    } else {
        console.log('undefined为假 - HTML5学堂');
    }
</script>
<script>
    if (null) {
        console.log('null为真 - HTML5学堂');
    } else {
        console.log('null为假 - HTML5学堂');
    }
</script>

查看原来的JavaScript书籍时发现，在1995年JavaScript诞生时，最初像JAVA一样，只设置了null作为表示"无"的值。但是，JavaScript的设计者并不希望表示“无”的是一个对象；另外，由于JS属于弱变量类型语言，所以对于数据之间进行运算的时候，会进行自动的数据类型转换，null会自动转换为0，此时如果代码是由于自动数据类型转换而出现问题，是很难找到错误的。基于这样两个原因，就有了而今的undefined。

关于上面提到的自动数据类型转换，写个实际的例子来解释一下，下面这个例子当中，原本num是一个数字，但是当数字和字符串运算时，“+”就从原来的加号含义就变成了连字符含义，组成了一个字符串。这个结果后面的过程就是，现将num数字转换为字符串，然后再将两个字符串相互连接。

<script>
    var username = '100';
    var num = 100;
    num = num + username;
    console.log(typeof(num));
</script>

null与undefined转为数值是什么

<script>
    var num = 100;
    console.log(num + null);        // 打印100
    console.log(num * null);        // 打印0
    console.log(num + undefined);    // 打印NaN
    console.log(num * undefined);    // 打印NaN
</script>

最初的区分方式

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

目前的用法

上面这种想法是好的，但是在实际操作中证明并不是那么可行，目前，null和undefined基本是同义的，只有一些细微的差别。

null表示"没有对象"，即该处不应该有值。

null出现在哪里？

对于函数的参数，为了表示该函数的参数不是对象，会使用null。这种用法在传参时经常遇到此类应用

对象原型链的终点是null

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。

undefined会出现在哪里？

1 变量被声明了，但没有赋值，默认为undefined

2 调用函数时，应该提供的参数没有提供，该参数默认为undefined

3 对象没有赋值的属性，该属性的值默认为undefined

4 函数没有返回值时，默认返回undefined

判断对象中是否存在某个属性，使用hasOwnProperty和in有什么区别

2016.05.30~2016.06.03

核心概念

hasOwnProperty、in操作符、原型链

参考答案

hasOwnProperty和in都可以用来判断某个属性是否存在于对象中，区别就是hasOwnProperty不能搜索到从原型链继承的属性，而in可以；

function Person (name) {
    this.name  = name;
}
Person.prototype.age = '22';


var person = new Person("sunhui");
console.log(person.hasOwnProperty('name'));    // true
console.log("name" in person);                // true


console.log(person.hasOwnProperty('age'));    // false
console.log("age" in person);                 // true

HTML5学堂小编 - 陈林&堡堡 耗时7h