Search code examples
cssresponsive-designmedia-queries

Why do a redirect, and an A record result in different media queries on the same device


I have a website hosted via github pages which uses two domain names. The first I configured as an A record using the GitHub instructions. The second I configured as a redirect using name.com's redirection service. This seems to work for the most part. However, when I visit the second domain via my iPhone the media query doesn't seem to work as expected. What is happening here, and is there a way that I can point the two domains at the one location without breaking the media queries like this?

Sorry for the large images, but I had some trouble finding a good way to show them side by side in markdown.

the correct rendering incorrect rendering


Solution

  • The redirect made by name.com isn't an actual redirect; they simply opens a frame to http://roblockyer.com. As of such, the meta viewport rules aren't considered on http://robertlockyer.com.

    I must question why you have two different domain names though. Search engines don't look friendly upon identical websites under different domain names. You should decide on one and stick to it.

    If you really want you site to be accessible from two domain names, then do a 301 Redirect through a .htaccess-document from one to the other should be both the best and the easiest way since it seems like the two domains are on different server spaces.

    So, if you're on an Apache server and want to redirect users from robertlockyer.com to roblockyer.com, then all you need to do is add this to the .htaccess-document on the server space hosting robertlockyer.com:

    Redirect 301 / http://www.roblockyer.com