Search code examples
responsive-designviewportframeset

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?

Solution

  • I set up a responsive design site which uses the client's viewport to determine how the site is configured. It turned out my domain name was forwarding with masking and the CSS was 'reading' the frame as the viewport. disaster averted.