在PC上测试移动端网站和模拟手机浏览器问题

可以用chorme自带的模拟器来模拟手机浏览器。

打开chrome开发者工具,按F12(r32版本),然后找到右上角的齿轮按钮,打开设置面板,选择Overrides,勾上Show ‘Emulation’ view in console drawer(在控制台视图中显示“仿真”)。

然后关闭设置面板,选择Elements面板(非Console就可以),找到右上角打开控制台面板,选择控制台面板里的Emulation面板,右边有很多选项,选择一个点击Emulate就可以了,Reset按钮能恢复到默认状态。

这种方法简单好用,而且不需要重启。

通常移动端在header中加属性

控制显示区域各种属性:

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

1. width – viewport的宽度 // viewport 的宽度 (范围从200 到10,000,默认为980 像素)
2. height – viewport的高度 // viewport 的高度 (范围从223 到10,000)
3. initial-scale – 初始的缩放比例
4. minimum-scale – 允许用户缩放到的最小比例
5. maximum-scale – 允许用户缩放到的最大比例
6. user-scalable – 用户是否可以手动缩放 (no,yes)
网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。

IOS中Safari允许全屏浏览:

<metacontent="yes"name="apple-mobile-web-app-capable">

IOS中Safari顶端状态条样式:

<metacontent="black"name="apple-mobile-web-app-status-bar-style">

忽略将数字变为电话号码:

<metacontent="telephone=no"name="format-detection">

一般情况下,IOS和Android系统都会默认某长度内的数字为电话号码,即使不加也是会默认显示为电话的,so,取消这个很有必要!

IOS中Safari设置保存到桌面图标:

<linkrel="apple-touch-icon"href=“custom_icon.png">

这是IOS中Safari特有的meta,是在你保存某个页面到桌面的时候使用这张图作为桌面图标,so,尺寸和iphone上的一致,是57*57px

但在PC端本地测试,模拟手机浏览器中显示时不是仿真显示,只有视窗是按手机分辨率显示,而实际页面宽度为红框的宽度,在视窗中会出来横向下接滚动条,如下图

加上<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1”>后就仿真显示了,如下图

这样写可以达到的效果是如果安装了GCF,则使用GCF来渲染页面,如果为安装GCF,则使用最高版本的IE内核进行渲染。

什么是GFC?
以下信息来自于互联网:
Google Chrome Frame(谷歌内嵌浏览器框架GCF)。这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器,谷歌这个墙角挖的真给力!
而上文提到的那个meta标记,则是在是安装了GCF后,用来指定页面使用chrome内核来渲染。
GCF下载地址: http://code.google.com/intl/zh-CN/chrome/chromeframe/
安装完成后,如果你想对某个页面使用GCF进行渲染,只需要在该页面的地址前加上 gcf: 即可,例如: gcf:http://cooleep.com
但是如果想要在开发时指定页面默认首先使用GCF进行渲染,如果未安装GCF再使用IE内核进行渲染,该如何进行呢?
就是使用这个标记。
标记用法:
阅读了下chrome的开发文档(http://www.chromium.org/developers/how-tos/chrome-frame-getting-started,需翻-墙),下面来简单讲解一下这个标记的语法。
1.最基本的用法:在页面的头部加入
1< meta http-equiv = “X-UA-Compatible” content = “chrome=1” >
用以声明当前页面用chrome内核来渲染。
复杂一些的就是本文一开始看到的那中用法:
1< meta http-equiv = “X-UA-Compatible” content = “IE=edge,chrome=1” />
这样写可以达到的效果是如果安装了GCF,则使用GCF来渲染页面,如果为安装GCF,则使用最高版本的IE内核进行渲染。
2.通过修改HTTP头文件的方法来实现让指定的页面使用GCF内核进行渲染:
在HTTP的头文件中加入以下信息:X-UA-Compatible: chrome=1
在Apache服务器中,确保 mod_headers 和 mod_setenvif文件可用,然后在httpd.conf中加入以下配置信息:
< IfModule mod_setenvif.c>
< IfModule mod_headers.c>
BrowserMatch chromeframe gcf
Header append X-UA-Compatible “chrome=1” env=gcf
在IIS7或者更高版本的服务器中,只需要修改web.config文件,添加如下信息即可即可:
< configuration >
< system.webServer >
< httpProtocol >
< customHeaders >
< add name = “X-UA-Compatible” value = “chrome=1” />

CSS display:none和visibility:hidden区别

CSS display:none;

使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;

visibility:hidden;

使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。

Overflow属性值{visible|hidden|scroll|auto}前提是先要限制DIV的宽度(width)和高度(height)。二者都是隐藏HTML元素,在视觉效果上没有区别,但在一些DOM操作中二者还是有所不同的。

合理设计CSS代码结构及优化

为了便于维护,最好把样式表划分为几大块。这包括应用于body标记的、应该由站点上所有元素继承的样式。接下来是可能需要所有的全局reset样式,然后是链接、标题和其他元素。

完成一般样式后开始处理更特殊的样式和辅助样式,随着在样式表中的移动,我们在一层样芽构建另一层样式,处理的样式越来越特殊。处理完页面结构元素之后,我们把注意力转到与特定页面相关的组件上。最后,在文档的底部处理覆盖和例外情况。整个文档的结构像下面这样:

1. 一般性样式

* 主体样式
* reset样式
* 链接
* 标题
* 其他元素

2. 辅助样式

* 表单
* 通知和错误
* 一致的条目

3. 页面结构

* 标题、页脚和导航
* 布局
* 其他页面结构元素

4. 页面组件

* 各个页面

5. 覆盖

这里使用一种风格统一的大注释块分隔每个部分。

/* @group general styles
——————————————————————————————————————————————*/

/* @group helper styles
——————————————————————————————————————————————*/

/* @group page structure 
——————————————————————————————————————————————*/

/* @group page components  
——————————————————————————————————————————————*/

/* @group overrides
——————————————————————————————————————————————*/

当然并非所有东西都能自然地分成定义明确的块,这需要开发人员进行判断。请记住,代码的分隔越细致、越合理,就越容易被理解,而且能够更快地换到要寻找的规则。

删除注释和优化样式表
在线CSS优化器:
www.cssoptimiser.com

减小文件大小最好方法可是能启用服务器端压缩。如果使用Apacha服务器,那么应该安装mod_gzip或mod_defate。所有现代浏览器都可以处理用GZIP压缩的文件并进行即时解压。这些Apache模块探测浏览器是否能够处理这种文件,如果可以,就发送压缩的版本。服务器端压缩能够将HTML和CSS文件减小大约80%,来减少对带宽的占用,加快页面的下载速度。

记录一下遇到的面试问题

上周末又泡咖啡馆看了一下午代码,收获不小,希望以后继续加油。

几道JS面试题整理了一下。

一、求下面这段代码的输出结果

var name="zhangsan";
function getName(){
	var arr=[1,2,3];
	for (var i = 0; i < arr.length; i++) {
		document.write("lily" + arr[i] + "<br />");
	};	
}
getName();
document.write(name);

输出结果是:
lily1
lily2
lily3
zhangsan

二、清除页面中所有DIV,下面这段JS有什么问题?

var divs = document.getElementsByTagName("div");
for( var i = 0; i < divs.length; i++){
	divs[i].parentNode.removeChild(divs[i]);
}

逻辑不对,DIV 元素是有层级的,如果外层的DIV删除了,里面的DIV也没有了,但是你获取到的 divs 数组里面还有循环的时候就会出错,

正确逻辑应该是查找所有div标签,然后获取第一个div,然后把它删除,循环这个过程,直到获取不到div,可以用到while循环语句

while(条件){
需要执行的代码
}

只要指定条件为 true,循环就可以一直执行代码。

如下是示例:

var divs = document.getElementsByTagName("div");
while (divs.length) {
    divs[0].parentNode.removeChild(divs[0]);
    divs = document.querySelectorAll("div");
};

三、请问下面几种情况中this变量,分别代表哪个变量,命令在运行结果如何?

var test = {
	setName:function(name){this.name = name;}
}

1)

var node = new test.setName("a");

2)

test.setName("b");

3)

var setName = test.setName;
   setName("c");

1)this指向node; 运行结构生成一个name=a的node对象;
2) this指向test;调用test的setName方法,给test增加一个name属性;
3) this指向global上下文(window);将test的setName方法赋给setName,在全局环境下调用setName方法,相当于window.setName(“c”);在window下增加(或修改)name属性,且值为c;

四、给出一串字符,如“google”,让字符倒序

function rev(str) {
    return str.split("").reverse().join("");
}
rev("google");

利用margin实现等高布局

主要是利用margin实现等高布局,实际上高度不相等的,只是隐藏了超出的部分。

html

<div id="main"> 
	<div id="left"> 
	我是左边的内容的啦啦啦啦。。。。

	我是左边的内容的啦啦啦啦。。。。

	我是左边的内容的啦啦啦啦。。。。

	我是左边的内容的啦啦啦啦。。。。

	我是左边的内容的啦啦啦啦。。。。

	</div> 
	<div id="right"> 
	左边的内容...哈哈哈哈哈 
	</div> 
</div> 

css:

#main{ 
	overflow:hidden; 
	width:500px; 
	margin:0 auto; 
} 
#left{ 
	float:left; 
	width:390px; 
	background:#eee; 
} 
#right{ 
	float:right; 
	width:100px; 
	background:#ccc; 
} 
#left,#right{ 
	margin-bottom:-1000px; 
	padding-bottom:1000px;