页面重构实战（三）---PC端页面

现在的电脑屏幕尺寸越来越大，分辨率也越来越高，所以网页的尺寸也必须调整。小弟的笔记本显示器15.6寸，分辨率是1920*1080，而网页的宽度却是960px，两边空白太多，导致显示效果很差。如下图：

因此，我将页面宽度统一增加到1180px。

关于< meta >

添加下面两个标签，对搜索引擎更友好。

<meta name="description" content="网站描述"><meta name="keywords" content="关键词">

优先使用 IE 最新版本和 Chrome
当你的电脑中安装了Chrome浏览器，你电脑中的IE浏览器将可以使用WebKit引擎及V8引擎进行排版和运算，使IE以最高的文档模式展现效果。这个标签很有用

<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->

兼容更多的设备（移动设备）

<meta name="viewport" content="width=device-width, initial-scale=1"/>

常用标签

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- 启用 WebApp 全屏模式 --> <meta name="apple-mobile-web-app-capable" content="yes" /> <!--隐藏状态栏/设置状态栏颜色 --> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app">

关于JS文件和CSS文件的注意事项