Responsive design and viewport not working through domain's "frameset."
I'm working on a responsive design site and ran into a fairly large snag. I used viewport code:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
and used:
@media only screen and (min-width: 501px) and (max-width: 930px) {
CSS HERE}
as needed. When I put my index page on my host server to check it the site wouldn't respond to changes between my mobile devices. I tried my domain name site- didn't work. Turns out the domain name points to my sever and displays the site in a <frameset> and canceling out my CSS and meta. When I go to the native web address of the server it works properly. Is there anyway around this?
Answer
SOLVED - I have found a solution using a well know hacking technique to inject the relevant code (without actually hacking anything!).
I have my domain name at 123-reg.co.uk and free webspace at freehostingEU, with framed web forwarding on 123-reg.co.uk to maintain my domain name in the free space. To solve the problem of the frame blocking the viewport meta tag on the site, go into the web forwarding options in somewhere like 123-reg.co.uk where you can usually set your meta title, meta desc, meta author etc, and inject the following code into one of the boxes where you are allowed to enter some meta data for your framed page e.g. meta author and insert:-
your-author-name"><meta name="viewport" content="width=device-width, initial-scale=1.0,
which will then put the viewport code into the frame forwarding page straight after the meta author. And it works, because I have just done it on 123-reg and it works great!