How to implement h5 mobile terminal adaptation

This time I will show you how to implement h5 mobile terminal adaptation and how to adapt to h5 mobile terminal? What are the precautions when adapting to the h5 mobile terminal? The following is a practical case, let’s take a look.

On the PC version of the web page (http://pc_url), add:

<link rel="alternate" media="only screen and(max-width: 640px)" href="http://pc_url" >

On the mobile version of the web page (http://mobile_url), the required Commentsshould be:

<link rel="canonical" href="http://mobile_url" >

The previous Meta tag (mobile agent) will continue to be used, but we recommend that mobile pages made in HTMAL5 language use the latest solution for jump adaptation, and other mobile page jumps such as xml language To adapt, you need to continue to use the previous meta tagging method:

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=mobile_url">

html5The new mobile adaptation is written as above. This is mainly for Baidu and other searchesindex What is the mobile URL of the website captured by the engine? It does not automatically jump when the device is switched to the mobile phone. If you want to implement automatic jump, you need js.

I believe you have mastered the method after reading these cases. , for more exciting content, please pay attention to other related articles on the php Chinese website!

Related reading:

How to wake up the app in h5

##Summary of all elements and basic syntax of H5

About how to handle old versions of browsers that are not compatible with H5 and C3

The above is the detailed content of How to implement h5 mobile terminal adaptation. For more information, please follow other related articles on the PHP Chinese website!