I'm using the line
<meta name="viewport" content="width=device-width;">
but it doesn't seem to want to actually work in dolphin or the android stock browsers.
has anyone had this experience or is viewport just not compatible with those browsers?
EDIT: I am looking to set the browser to show 100% of the page, no zoom, just page. Setting the scale does the reverse of what I need and the users need to be able to zoom.
W3C recommends this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
yes, I am aware, that it is from 2010 but I couldn't find a newer version
And it works for all androids I ever tested; also for dolphin. If you want to be really sure that even very outdated microsoft devices get it, you could also add:
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
At least it won't hurt to use all three, even though probably the last two will almost never be relevant.
EDIT: Turns out the opposite of what width=device-width does is requested. The thing is: Having zoomed out is the default behavior of every mobile browser, considering the content doesn't fit. Anything else would be counterproductive. I tried it with dolphin on various sites without any viewport-meta and it works as intended. So your content actually seems to fit, what means your documents width is indeed equal to or smaller than the device-width. That is for example the case, if you ...
... float crucial elements of your page contents
... fill your content via JavaScript (/Ajax) afterwards
... have crucial elements absolute positioned
... have negative margins on some crucial elements in your content
... have a dynamic page width, that scales to the windows width
Of course there are more possibilities. Unfortunately body { min-width: 800px; } (or whatever you want to be the min-width) is the only solution that comes to my mind, at the moment.
If your content has a static width, you could try
<meta name="viewport" content="width=980px" />
with 980px being your page width. But actually in that case, the documents width should be at least 980px anyway. So the viewport width should not be possible to achieve what you want.
Related
I want to force browser, to set virtual viewport to a fixed value.
Typically the meta viewport in responsive page looks like:
<meta name="viewport" content="width=device-width, initial-scale=1">
i found a solution to set width to fixed value:
<meta name="viewport" content="width=1200px">
But unfortunately it works well only in chrome. What i want to get is with width lower than 1200 i want to turn on the zooming functionality.
Does anybody knows any other trick to do it?
EDIT
Actually the problem is, that i managed almost all layouts with bootstrap to achieve responsiveness. But client decided, that he don't want this page to be responsive, but make the width fixed regardless of device width and toggle horizontal and vertical scrollbars if needed.
What i am looking for is a realy easy warkaround, to do this without hudge style modifications.
Give this a try in jQuery:
if(screen.width < 1200){
$("meta[name=viewport]").attr("content", "width=device-width, initial-scale=1, user-scalable=yes");
}
So I'm having an issue where my site has a lot of padding on the right side, making the layout load incorrectly. It appears correctly in on my desktop when the window is resized, but everything other than the header breaks when viewed on my phone. All of the relevant divs are set to a width of 480px, and I have the following tag in my header for the media query:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here are screenshots of how it appears on desktop and mobile, as well as a link to my mobile css page (the menu is open on mobile, but the extra space seems to affect it as well).
CSS Page
Edit: I'm now having a slightly different issue, where the margin has been added to the entire right side of the screen. I changed the pixel widths for many of the divs to 100%, as well as adding the <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> tag to the header. While they can no longer zoom out, you can just scroll the screen horizontally to find the padding. I'm also having an issue with my font-face tag, which no longer loads the header fonts. I updated the css file, so hopefully that shows why it won't work anymore.
Also, here's a link to the live site: Link
You shouldn't be setting explicit widths here, (at least not in pixels anyway) and from a brief glance at what you've posted I'd imagine that's where your issue lies.
Firstly, take off the widths that you've set for anything that you intend on being "full width" - remember divs are block-level elements anyway, so if you don't set a width at all, they'll have a width of 100%.
Secondly, take off any other pixel widths you're setting and change them to be percentages instead.
Thirdly, you'll save yourself a lot of headaches if you set 'box-sizing' to 'border-box' (I'd recommend just doing it on '*' for simplicity). This will prevent your padding and margin from being added on top of any widths you set as percentages; they'll be included in the box sizing instead.
Finally, I can't stress enough how important it is to get out of the mindset of things like "mobile" and "desktop". All we're talking about here is different viewport sizes. :)
If you have a live link you can share I'd be more than happy to have a proper look at this.
Add the following to your .css file:
img{max-width:100% !important}
I have a fixed-width site (980px) where we have been asked to remove the right hand sidebar on smaller devices. (Devices where the screen size is less than 768px, say.)
This means that effectively, we're running two fixed-width sites from the same codebase.
We're using the following meta tag in the site:
<meta name="viewport" content="width=device-width,initial-scale=1">
The problem is that on larger tablets, we're seeing the full site (as we should), but zoomed in. (Because the tablet is considering full width to be - say - 768px and is zooming accordingly.)
I cannot set width to be a fixed size:
<meta name="viewport" content="width=980,initial-scale=1">
...because smaller devices will then zoom out too far.
Is there any workaround that will fix the zoom-level properly for all devices?
(n.b. I am aware that the basic idea is wrong here.)
OK, so I've managed to get this up and running.
Start by setting width=device-width to ensure that the correct "responsive" version loads. Give the metatag an ID so that we can easily grab it later.
<meta id="viewport" name="viewport" content="width=device-width"/>
Then, we want to check the screen size so that we can force the width and zoom to right size:
(function($){
$(function(){
if (window.matchMedia !== undefined) {
var mq = window.matchMedia("(max-width: 767px)");
if (mq.matches) {
$('#viewport').attr('content', 'width=767');
}else{
$('#viewport').attr('content', 'width=980');
}
}
});
})(jQuery);
I noticed that setting initial-scale in any way broke zoom.
Note that I'm using window.matchMedia here, which although not fully supported, is fine for my purposes. If you need to support a greater percentage of users, you might consider using Modernizr.mq instead.
Researching viewport behaviour, I've hit a bit of a snag in understanding the meta viewport declaration.
I see width=device-width and initial-scale=1 used together a lot but, as far as I can tell, the latter implies the former.
MDN also mentions that defining both a width and initial-scale=1 will result in the width acting as a minimum viewport width. If this is the case then is there any need to define the width as device-width? Surely the initial-scale can't be 1 with any layout viewport smaller than the device-width anyway.
Am I missing something or is defining the width as device-width redundant here?
Thanks
Using both width=device-width and initial-scale=1 ensure cross browser/device compatibility. For example, for iOS devices, initial-scale=1 is needed for your page to pick up on orientation change of the device as width=device-width will not. Using both ensure maximum effectiveness using the meta viewport tag.
The 2 tags are not the same.
The 'width=device' tag tells the browser to use the device's real width as the 100% width of the screen. If you omit it, a mobile device will simulate as if it has higher resolution and your content will not be stretched to full width.
The initial-scale is the zoom level on first load. If it is set to 1, along with 'width=device', then the content will not be zoomed out or in. You will also not be able to zoom out more than the initial scale (but you will still be able to zoom in). That will be as if you set 'minimum-scale' to 1 as well.
There is also a 'maximum-scale' and if you set it to 1 as well, the user will not be able to zoom in more than the initial scale.
This is an example of how you can create an 'app-like' feeling, where the content uses the device's width in a 1:1 ratio.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
Hope this helps!
I'm working on a website for a small festival for a friend, but I'm trying to work with mobile browsing WITHOUT fluid layouts, ect. It's just a website that I want to use the classic viewport script so it will be at the minimum zoom when a mobile device comes to it.
HTML
<meta name="viewport" content="450, initial-scale=1, maximum-scale=1">
That's what I have now however I have tried this way as well.
<meta name="viewport" content="width=device-width,initial-scale=1">
Yet every single time I come to the site on my mobile device it's zoomed in so you can only see the logo.
What am I doing wrong?
Also there are 2 other things I've noticed when viewing on the phone.
The footer background colour doesn't stretch all the way across (and it's no different if I have device-width OR width="XXX"). Yet the width of my footer is 100%. I don't understand what is happening here.
And I'm trying to put padding, or a space to the left and right of the content so the website isn't resting right up on the side of the window. I want to have space to the left and right. I've tried to put this on the html tag but it only applies it to the left side??
I've gone to https://developer.mozilla.org/en/Mobile/Viewport_meta_tag & http://www.quirksmode.org/mobile/viewports2.html and other websites and can't understand what might be happening in any of these cases.
Any help, advice, direction or guidance is VERY much appreciated.
To fix the background issue try adding this:
body {
min-width: 1024px;
}
You have the top sections of the page inside a container with an explicit width (960px), which is why you aren't having an issue with them. The footer however is on its own without an explicit width set. You could also just enclose it in the same div with the id 'container' you used for the rest of the page.
This should also fix your padding issue. Make sure you are adding it to the content containers. For example:
#main {
padding: 0 1.5em;
}
As for the zooming issue, I am not seeing it on an iPad or an iPhone. Since you are not doing any sort of fluidity or responsiveness this is what you should be using. What initial-scale=1 is doing is zooming it into to its actual width, not fitting it to your screen.
<meta name="viewport" content="width=device-width"/>
You might want to check out this question: Android ignores maximum-scale when using fixed-width viewport meta-tag for the Android issue. I don't have an Android device handy to test so I don't want to give you incorrect info on that part.