首先,我们需要调整自适应网页代码,防止手机浏览器自动调整页面大小。 iOS 和Android 浏览器都基于webkit 内核。这两款浏览器和其他很多浏览器都支持viewport meta element来覆盖默认设置画布缩放,只需要在HTML head标签中插入一个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'/: 代码适配
本文来自推来客:企业网站设计
我们专注高端建站,小程序开发、软件系统定制开发、BUG修复、物联网开发、各类API接口对接开发等。十余年开发经验,每一个项目承诺做到满意为止,多一次对比,一定让您多一份收获!