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 条评论
登录 后参与评论

相关文章

来自专栏怀英的自我修炼

怀英漫谈2-JS语法初涉

今天碰了一下JS的语法,想与你聊聊这个。这篇文章适合前端设计师,不过在文末,我也为你准备了一些感悟,有兴趣的不妨跳到最后一看。 总体来看,JS的语法和Java的...

34410
来自专栏Java帮帮-微信公众号-技术文章全总结

Java高级开发工程师,面试总结

Java高级开发工程师,面试总结 每个人都会有的抉择 时隔两年,再一次的面临离职找工作,这一次换工作有些许的不舍,也有些许的无奈。个人所在的技术团队不错,两年时...

3505
来自专栏我和未来有约会

(收藏)JS验证

1 /* 2 函数名:检验表单的函数 3 作者:xuwen 日期:2007-2-10 4 参数 _obj:验证的对象 ...

17210
来自专栏Flutter入门

Vue 绑定简单分析实现

使用js es6 中 Object.defineProperty为我们自己定义的VM创建示例。同时这个方法通过提供了set.get方法的触发我们的监听事件。

641
来自专栏Spring相关

第3章—高级装配—bean的作用域

单例是默认的作用域,但是正如之前所描述,对于易变的类型,这并不合适.如果选择其他作用域,要使用@Scope注解,他可以和@Component或@Bean一起使用...

652
来自专栏转载gongluck的CSDN博客

Markdown 语法说明(简体中文版)

NOTE: This is Simplelified Chinese Edition Document of Markdown Syntax. If you a...

3597
来自专栏web编程技术分享

js常用方法和一些封装(3) -- dom相关

34610
来自专栏游戏杂谈

php正则表达式的分组捕获

经过测试,发现php正则表达式获取分组捕获是从$0开始,而平时工作中JavaScript中的正则是$1..$9

553
来自专栏CDA数据分析师

飞跃式发展的后现代 Python 世界

如果现代Python有一个标志性特性,那么简单说来便是Python对自身定义的越来越模糊。在过去的几年的许多项目都极大拓展了Python,并重建了“Python...

1936
来自专栏从零开始学自动化测试

appium+python自动化48-长按(long_press)

长按操作是经常会遇到的场景,通过driver可以直接调出long_press_keycode方法,但是这个方法是长按手机上某个按钮,比如长按电源键,长按home...

1201

扫码关注云+社区