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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-06-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏禁心尽力

采用HTML5之"data-"机制自由提供数据

周末总是过得很快,又到了跟代码亲密接触的日子,我在北京向各位问好,今天我分享一点关于前端的东西,HTML5之标签"data-*"自定义属性的值传递。     ...

18710
来自专栏企鹅号快讯

动态语言的灵活性是把双刃剑:以 Python 语言为例

新媒体管家 关键时刻,第一时间送达! 本文有些零碎,总题来说,包括两个问题:(1)可变对象(最常见的是list dict)被意外修改的问题,(2)对参数(par...

2007
来自专栏web前端教室

ReactJs的虚拟dom是个啥情况?

这个周末的先行者课程要讲React的一些东西,所以今天写一些React的内容。 话说前端操作中最消耗资源的是啥?如果我说dom操作,那应该没有人会反对吧。 在以...

1855
来自专栏河湾欢儿的专栏

前端三大框架比较Angularreactvue

792
来自专栏数说工作室

统计师的Python日记【第1天:谁来给我讲讲Python?】

统计师的Python日记 【第一天】谁来给我讲讲Python? 我是一名数据分析师,曾在漫长的岁月中使用SAS、Matlab和R(使用频率依次递减)。其他如...

3666
来自专栏点滴积累

Python扩展方法一二事

前言 跟着一个有强迫症的老板干活是一件极其幸福的事情(你懂的)。最近碰到一个问题,简单的说就是对一个对象做出部分修改后仍然返回此对象,于是我就写了一个方法,老板...

3306
来自专栏Golang语言社区

第八节 Go语言条件语句

干货来了!!!为了让更多的小伙伴喜欢Golang、加入Golang之中来,Golang语言社区发起人彬哥联合业界大牛共同推出了Go语言基础、进阶、提高课程,目前...

663
来自专栏mathor

导入:什么是数据结构,为什么要学习数据结构,约瑟夫环的数组实现

975
来自专栏FH云彩

通过IP获取位置

1056
来自专栏cmazxiaoma的架构师之路

Java小白必须会的一道面试算法题

1373

扫描关注云+社区