Is it possible to have <meta name="viewport" and ignore media queries


Not a very explicit title I’m afraid.

My new page under construction works fine in full screen and for media-queries max-500px.

But as I cannot get it to work for other smaller widths in-between, I would solve the problem if for those widths there was no meta-name=“viweport” and the page would just adjust to the screen of, say, a tablet.

I suppose that I could put a conditional in the <head> to restrict the media queries to max-500 and nothing else.

Would this be the best solution?

thank you

Could we simply just focus on getting under 500px to work instead of turning our backs to it :slight_smile: ?


“under 500px” works. Well it least as far as I am happy with it. It also works in full width (PC). But I would like the middle sizes to adjust to whatever screen size, as if there was no meta viewport.

And there I am not sure what is the best way.

Well what media query do you have right now? You could only apply that media query for 500-600px (or whatever you consider “middle”. That way 500 and below will get the default styles.

Show us your media query and we will guide you.

1 Like


You can see it in “View source” of

But maybe I did not explain myself well. I spent some time trying to set up a media query for about 800/100px and gave up!~

If you look for instance at another of my pages, that does not have media queries or meta viewport, the page adjusts to all screens, even mobiles.

That’s what I am trying to work out: if it is feasable to MIX media queries for less than 500px with some sort of conditional that would make the page adjust to all screens and only come into media queries if it gets below 500px.

At the moment if you drag the screen leftwards, the page gets progressively cut off until you get to 500px when the media query kicks in.

I am on top of a mountain (literally!) and have no access to tablets to see what happens to the page. Only when my daughter comes in will I be able to see a mobile, but not the mid-size screens.

Barcelona link does not adjust for ANY screen sizes. Once it starts cutting off, it continues cutting off. How does it do any adjusting for you? If there is no meta viewport tag, then devices will shrink your website and attempt to fit it on their device screen. It does not do any responsiveness. Tablets might not suffer too much but phones would have a 1000px site shrunk down to miniscule size and users will have to zoom in.

I thought I understood until you posted that Barcelona link in. That has no responsiveness to it at all.

Hu Ryan

Sorry for my lack of expertise on this.

Yes, I agree with you if you try it on a large screen and narrow it progressively. I was referring to my experience with my daughter’s mobile. If I don’t have meta viewport a wide page loke the Barcelona none will adjust to the available screen. Please, try it on your mobile. On a tablet, I have no idea what happens and that is what I am trying to find out.

I just explained it good sir :slight_smile: . Tablets and mobiles will shrink the entire page down (but not be responsive). So if you have a huge page and you view it on a mobile phone, it will appear really tiny. Users will need to enlarge it manually.

The benefit of meta tag/media queries is that the meta tag will allow devices to go off of their screen width, so e.g. 350px screen width. So look at my website. Go to

Shrink it down and you’ll see that near mobile screen size, I go to 1 image vertical stack and the footer turns vertical. You could not do this without media queries and the meta tag (the meta tag would still read my site as 1000px wide and shrink it down which looks TERRIBLE). So if you wanted specialized mobile view for your website, forget about it.

1 Like

Hi Ryan

Your page: that’s what I tried to do, but gave up! Under 500px it works well.

So if you have a huge page and you view it on a mobile phone, it will appear really tiny. Users will need to enlarge it manually.

Your above quote: I know, but right now that’s what i would like to do. make sure that the page appears whole even if tiny.

Take a look at this.

1 Like

I think thats what I was looking for. Thanks

But can I MIX a meta viewport like the ones in the link with the exiasting media queries max-width 500px?

I’ve been trying to think of ways around this, but I would imagine you’d need Javascript to do this. I just don’t see a way to make the META tag not respond in under 500px. I’d use Javascript to feed that ONLY for 500px+

Though TBH making a site responsive is VERY little work. For my entire website, this is how my media query…

    @media (max-width:575px)
.portfolio #mainContent ul li{float:none;text-align:center;width:auto;}body #footer>div{margin:0!important;float:none!important;width:auto!important;padding:5px;overflow:hidden;border-bottom:1px solid #666;}
.followFooter a{clear:none;margin-right:20px;}
.followHeader a{margin-left:1px;}
.search input{width:100px;}
.followHeader img,.followFooter img{width:40px;height:40px;}
ul#navigation li:first-child{display:none;}
ul#navigation li{width:16.66%;}#lightbox img{max-width:100%;}#sidebar{display:none;}
#mainContent{border:0;border-top:1px solid transparent;left:0;position:static;padding:0;margin:0;}
.portfolio ul li{width:auto;margin:0;}
.portfolio ul li a img{width:auto;}
#footer .links a:active{background-color:#38BCD9;color:#000;}
#footer input[type=submit]{vertical-align:middle;}}

That could probably be shortened as well. A lot of that is just minor work.

1 Like


Well I can make it work if I get rid of the sidebars, like I did for under 500px. However, I am playing with the idea of keeping at least the left sidebar.

But. for me. at the moment, I would be happy to just make sure that tablets can see the whole of that page and then for mobiles the under 500px would kick in.

Unfortunately I cannot see how to get hold of a tablet where I am…

I can assure you that the tablets will probably be fine. Tablets will try and force your website to fit their screen. If I was a betting man, I’d bet you are fine. However, at my work we have tablets. Feel free to post a link and I’ll confirm.

1 Like


I’ve substituted

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<meta name="viewport" content="width=1024">


In my narrowed PC screen the mobile version still works

Let me know what you can see on a tablet and what is the pixel size of the tablet

Please edit your post and highlight the code. In the typing box, you will see a </> and please click that.

You are making the device think that the page is 1024px…You are forcing htat view on it. Portrait shows half hte page cut off (but you can scroll over)…landscape resolution for iPads are 1024px so it fits perfectly…but Portrait isn’t 1024px wide so it displays bad.

So, what pixel size ahould I use? lower?

My page is 100px wide. I’ll make the meta tag 100px. Wait

No because that would mean Portrait users would suffer. Just use Javascript to serve the meta tag.

I don’t know anything about js. And very little about ecerything else…