: How to serve 2 different websites according to device-width without affecting SEO? I have one website for desktop that is designed for 1024 width and above. This means that some mobile devices

@Connie744

On the pc web site add meta tag that links to the mobile version like:

<link rel="alternate" media="only screen and (max-width: 640px)"
href="http://m.example.com/page-1" >


On the mobile version add meta tag that links to the normal version:

<link rel="canonical" href="http://www.example.com/page-1" >


See developers.google.com/webmasters/smartphone-sites/details

Vote Up Vote Down

@Kristi941

In case you have two different CSS files, you can display required one in landscape or portrait mode using css media queries. You can also hide Elements not required in one orientation.
eg:

For Landscape CSS, create css-landscape.css and use this media query:
@media screen and (orientation:landscape) { ... }


similarly for Portrait, create another CSS and use this media query inside:
@media screen and (orientation:portrait) { ... }


For detailed info about CSS Media queries, check here: css-tricks.com/css-media-queries/
Hope this helps.

Vote Up Vote Down