First, we need to adjust the adaptive web page code to prevent mobile browsers from automatically adjusting the page size. Both iOS and Android browsers are based on the webkit core. These two browsers and many other browsers support the viewport meta element to override the default canvas zoom setting. Just insert a<meta>tag in the<head>tag of HTML, You can set specific width (such as pixel value) or zoom ratio of 2.0 in the<meta>tag.
.jpg)
Then, the page should be modified to a percentage layout. When a browsing window is outside the fixed range of media queries, the page needs to be scrolled horizontally to be fully browsed. Through the percentage layout, the page elements can flexibly modify the style according to the window size from media queries to media queries. Specifically, the css code does not specify a specific pixel width, Instead, it specifies a percentage width, or width: auto.
Finally, let's talk about the key points of responsive websites being friendly to Baidu,
1. How to write the applicable device label
With the adaptive design of web pages, Baidu friendly design should also be taken into account, that is, tell Baidu "I am an adaptive page" to facilitate Baidu's identification and verification. The method is also simple. Just add an applicable device tag below the viewport tag above:
<meta name="applicable device" content="pc, mobile">means that the page is suitable for browsing on both mobile devices and PCs.
2. When using the site of Baidu webmaster platform link submission tool to submit, the mobile type mark should be made. The specific value is:
<mobile:mobile type="pc,mobile"/>
Other web page values are as follows:
<mobile: mobile/>: mobile web page
<mobile: mobile type="mobile"/>: mobile web page
<mobile: mobile type="htmladapt"/>: code adaptation
This article is from Shangpin China: Enterprise website Design
