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.
“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.
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.
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, http://pintotours.net/Europe/Spain/Barcelona.html 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.
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 . 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 www.codefundamentals.com/portfolio.php
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.
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)
{
.responsivefooter{width:100%;height:200px;}
#container{max-width:95%;min-width:initial;padding:1px;margin-top:10px;}
#header>a{width:100%;min-width:initial;max-width:none;height:auto;}
#header>a>img{max-height:none;height:auto;}
ul#navigation{float:none;min-width:initial;width:100%;}
.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;}
.followHeader{clear:none;float:left;min-width:initial;}
.search{float:left;margin-left:5px;}
.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;}
#main{background-image: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.
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.
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.
?