如果你是利用内容发布谷歌网站管理员工具来监控您的网站的健康，你可能已经收到了来自谷歌相当不祥的电子邮件近日宣布你的网站的移动不友好的性质与侧服务了COM荷兰国际集团损害您的搜索引擎排名结果。对于我们的网站
屏幕截图：来自Google的不祥电子邮件
事实证明，这些警告电子邮件不仅仅是良性建议; 从2015年4月21日开始，谷歌排名的重大更新显然会优先考虑移动优化网站的展示位置，而不是谷歌搜索结果中未优化的移动搜索或移动设备搜索。如果您的网站拥有越来越多的移动受众群体，那么您将面临新Google更新受到重创的前线。对于我们其他人来说，写作是在墙上。
- 我的网站是否适合移动设备？
Google发布了移动友好测试工具，可让您快速确定某个网页是否通过了移动测试。输入一个URL以查看某个页面是否通过了集合，然后对类似页面进行相同的推断。
解决Google移动可用性问题的第2步
以下指南的目的是帮助您快速解决这些恼人的移动设备可用性问题谷歌是 plaining大约将从2015年4月21日及以后的搜索引擎排名产生不利影响。这并不意味着作为一个 prehensive指南，使您的网站移动设备优化。从那里，您将需要深入研究转变您的网站的主题，以充分响应和未来证明。
第1步：将正确的DOCTYPE和视口META TAG添加到页面顶部
每个移动友好页面的开头都是以下内容 - 将HTML5 DOCTYPE添加到页面的顶部，将视口META标记添加到HEAD部分：
| 1 2 3 4 五 |
|
这些新增加的是合租的第一件事情谷歌检查移动可用性 pliance。该
随着视口元标记的添加，现在没有回到你的页面移动友好的旅程，因为在这里停止实际上对移动用户体验弊大于利 - 没有自动缩小页面，一切都在页面在小屏幕上显示尺寸。如果没有网站管理员的进一步优化 - 你会使浏览页面对移动用户来说更加麻烦，不得不滚动一百万英里才能到达页面的各个部分。
让我们快速进入下一步。
第2步：使用CSS Media查询在关键移动断点处优化您的页面
添加doctype和viewport标记后，Google核对清单中的下一项是：
-
页面布局是否适应移动设备宽度的宽度，因此用户无需不断地水平滚动以完整地查看主要内容。如果您的布局当前使用固定单位（例如960px）作为其宽度，则需要将其更改为流体单位（即：％），至少在移动设置中查看页面时。
-
无论字体大小和行间距是否合适，通常在移动设备上，都需要从默认值增加以获得最佳体验。
所有这些听起来可能相当令人生畏，但幸运的是，CSS内部现有的工具可以轻松处理这两个问题，同时如果您愿意，可以及时让妻子和孩子们为午餐约会惊喜。这种武器是CSS Media查询，这是 一种普遍支持的CSS功能，其关键技巧是能够根据所需的“媒体”条件触发，其中包括从移动设备或浏览器的尺寸，方向到像素密度的所有内容。屏幕。换句话说，我们需要对当前正在查看页面的设备做出反应。
采用最简单/最快的途径来获取Google移动友好认证页面，您要做的是使用CSS媒体查询有条件地隐藏页面上的辅助元素，以便主要内容在前面和中间可见，而无需水平滚动屏幕变得足够小。我们首先做以下事情：
-
识别页面上的非主要元素，例如左侧栏和大型横幅广告，并为每个容器分配一个唯一的ID属性，以便稍后在CSS中引用它们。
-
识别页面上的主要内容，并为其容器提供唯一的ID属性。
所述策略是隐藏非主元素和优化主内容容器，以便后来的是COM ES在宽度流体，它的字体和行间距，当屏幕是增加COM上课足够小（可检测使用CSS媒体查询）。在传统的两列TABLE布局之上构建的两列页面上，这是游戏计划的图形化外观：
为了交流COM plish上述情况，我们会利用吹捧CSS媒体查询，加入到我们现有的CSS文件（的CSS）或内联<style>标签下面的末尾：
| 1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
语法非常简单 - 每个媒体查询条件都包括@media (conditions){...}，其中普通CSS在其括号内添加，仅在满足指定条件时应用（并在不符合时删除）。
在上面我定义了两个CSS媒体查询，当用户的浏览器/设备宽度分别为860px或更低，以及600px时匹配。通过定义的断点调整浏览器窗口的大小，以查看页面的响应方式。与CSS中的所有内容一样，除了匹配多个条件之外，来自多个媒体查询的样式级联并应用于其中。因此，对于600px及以下的第二媒体查询，当匹配时，该页面也接收在800px媒体查询内定义的样式。注意我是如何给出某些CSS规则后缀的!important- 只要你注意到尽管匹配条件没有应用继续定义的CSS值，但是如果目标元素上已经存在任何具有更高CSS特异性的CSS样式，则会发生这种情况。 而不是你的手机风格。例如，在元素标签中直接定义的内联CSS声明总是优先于外部CSS文件中定义的内容，或者在HEAD部分中全局定义，这可以使我们精心设计的移动样式!important不受限制。
- 现在检查谷歌！
上述两个步骤足以将大多数桌面时代的页面转换为足够移动的页面，以通过谷歌的挑剔眼光。证明是在谷歌移动可用性测试结果中：
因此，我们通过Google移动测试的方法如下：向您的网页添加有效的doctype和viewport元标记，然后使用CSS媒体查询隐藏页面上的辅助元素，同时使主要内容的宽度流畅，以跨越整个视口。隐藏次要元素有助于释放主要内容的宝贵空间，并防止水平滚动访问部分内容。最后，当设备屏幕足够小时，line-height如果需要增加字体大小和间距，以使其在小屏幕上更清晰。
两个最大宽度的故事 - max-width并且max-device-width
在上面步骤2的CSS媒体查询中，我们使用关键字max-width 专门用于在应用封闭的CSS之前检测所需阈值之下和之下的浏览器窗口的大小。您可以使用另一个关键字替代它，就是这样max-device-width。 max-device-width不匹配的浏览器窗口，在桌面的宽度COM帕特可以由用户来调整，而是在设备的整个屏幕宽度，这不会改变。例如，在屏幕分辨率为1024x768的桌面上，device-width始终为1024.在iPhone 6上，该值为375.替换max-width为 max-device-width相反，在我们的CSS媒体查询中，如果您希望仅将移动CSS应用于实际的移动设备，而不是桌面浏览器，其浏览器宽度足够小，则非常有用。修改后的CSS媒体查询：
| 1 2 3 4 五 6 |
|
将基本上只能在实际的移动设备应用与device-width的600px的或更小，因为没有现代桌面融为一体帕特有600px的分辨率水平，这些天。如果您希望最大化默认非移动布局的收视率，则可以使用此方法，因为桌面用户将始终收到默认的CSS集。
通过调整桌面浏览器窗口大小来测试CSS媒体查询并不总是足以准确地了解页面在移动设备上的外观。这就是为什么在下一页上，我们将查看两个非常有用的工具，用于在不同设备中模拟/测试您的页面。
3762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
