首先我们要将自适应网页代码上做出调整,阻止移动浏览器自动调整页面大小,iOS和Android浏览器都基于webkit核心,这两种浏览器以及其他的很多浏览器都支持viewport meta元素覆盖默认的画布缩放设置,只需在HTML的<head>标签中插入一个<meta>标签,<meta>标签中可以设置具体的宽度(如像素值)或者缩放比例2.0。
然后要将网页修改为百分比布局,当某个浏览窗口处于媒体查询固定的范围之外,网页就需要水平滚动才能完整浏览,而通过百分比布局可以页面元素根据窗口大小在一个又一个媒体查询之间灵活修正样式,具体来讲,就是css代码不会指定具体像素宽度,而是会指定一个百分比宽度,或者直接就是width:auto。
最后在讲讲响应式网站对百度友好的关键点,
1.applicable-device标注应该怎么写
有了自适应设计的网页,还要照顾到对百度友好的设计,即告诉百度“我是自适应页面”方便百度进行识别校验。方法也很简单,只要在上面viewport标签下面再添加一个applicable-device标签就行:
<meta name="applicable-device" content="pc,mobile">表示页面同时适合在移动设备和PC上进行浏览。
2.在使用百度站长平台链接提交工具的sitemp进行提交时,要做mobile type标记,具体取值:
<mobile:mobile type="pc,mobile"/>
其他网页取值如下:
<mobile:mobile/> :移动网页
<mobile:mobile type="mobile"/> :移动网页
<mobile:mobile type="htmladapt"/>:代码适配