I have mobile optimised several sites in the same way using media queries - most are working fine on phones but two insist on always detecting a screen.width of 800px, no matter how small the actual device is.
Working correctly:
www.accountex.co.uk, www.legalex.co.uk, www.takeawayexpo.co.uk, www.streetfoodlive.co.uk
Detecting wrong screen size but only on mobile devices:
www.greatbritishbusinessshow.co.uk, www.bstartup.com
Even though the methods used are almost identical. The above two show correctly on all online mobile simulators, BUT use the media query for a screen width of 800px when loaded on actual mobile devices even when the device is 320x480 or otherwise very small.
Using console.log or alert these two sites always return 800px as the when alert(screen.width) is invoked - no idea how this can happen on a tiny device!
Thanks for your help!
use this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I have a web app like my image 1 below, everything looks good. The problem is that when the app is launched on a mobile that has a notch, it creates a layout problem, as you can see in image 2. And I can not use a "safe area" because some of my pages need to be stuck on top, like the image 3.
I can easily solve this by adding media queries to add a padding above the content on iPhone X, but the problem is that not only iPhone X have a notch.
Ideally there should be a JS method to detect mobiles with a notch (and return the height of this notch would be even better) But is this possible? If not, what is the better way to deal with this problem? Do I have to create media queries for every smartphone in the world ?
HTML::
meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"
CSS::
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
Since my website doesn't look good at all on a small screen, I want to create a JS function that redirects me to a mobile version of the page when width of the screen is smaller than or equal to 800px.
Here is the code for it:
if (screen.width <= 800) {
document.location ="index_mobile.html";
};
If the code works, then when I shrink down the browser window to 800px wide, the index_mobile.html should show up. But it is not showing up right now. Does anyone know what's going on?
http://jsfiddle.net/RZMmV/
Mobile browsers do not report or use the real device resolution because this would make basically all websites on the internet unusable.
What they do is creating a "virtual screen" that has a resolution that is closer to the resolution of a desktop PC and then will implement zooming on the page.
If you want to know the real device resolution you need to disable automatic scaling done on the device. For example for iOS and Android devices this can be done adding
<meta name="viewport"
content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
to the <head> section of your page. This informs the browser that the page has been designed for handling low-resolution devices and disables the virtual screen layer.
screen.width will return the width of the monitor, not the window, so you can't just shrink your browser window down to get a different value. To do that, you'll want to use window.outerWidth or something.
I came to a problem on the later stage of a project for a mobile page. Client asked to support both iPhone and various android mobile devices instead of supporting iPhone only.
The mobile page was written in XHTML, with html page width 640px, and its elements have width,e.g. 500px, %20... so the page look great in iPhone's safari with the following viewport, but ugly in other devices's browsers.
<meta name="viewport" content="user-scalable=no, width=device-width, target-densityDpi=device-dpi,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5;">
I was trying to solve the problem by playing with viewport, but have being struggling for a long time. My idea is about the initial-scale, can someone suggest a way to dynamic assign this value = device-width/640 ?
Thanks
You should just use:
<meta name="viewport" content="width=320">
Why 320? It's because although the iPhone 4's screen is 640 pixels wide in portrait, it's a "retina" display with twice as high effective dpi as desktop screens. Hence it has a window.devicePixelRatio of 2, which means that its device-width is only 640/2 = 320 CSS px, i.e. each CSS px takes up a 2x2 square of physical device pixels (see this article on QuirksMode for more details).
This 2x scaling is very useful, because for example you can set font-size:14px and the perceived size of that text will be the same as if you viewed 14px text on an iPhone 3G (since it will actually be displayed using 28 physical device pixels on the iPhone 4, which compensates for the higher dpi). If instead your font-size:14px text was shown using only 14 physical device pixels, it would look tiny on the iPhone 4 (half the size that it would on a iPhone 3G).
Now, there is a consequence of this: your site has to be designed for 320px width, not 640px. But that was already true, since iOS has never supported target-densityDpi=device-dpi, so by putting width=device-width you were effectively putting width=320 anyway.
So why use width=320 instead of width=device-width? Since you say that your site is a fixed-width layout, then with width=device-width it is likely to look bad if it is shown on different size devices, for example you might see a white margin down the right hand side on wider devices, whereas with width=320 the browser will scale it up to fit the device's screen width (it may therefore look somewhat enlarged, but that's probably better than having a white margin).
However, please just consider this a stop-gap measure: it would be much better to keep width=device-width, and modify your site design to be flexible instead of fixed-width (for example set width:100% on your divs and images instead of width:320px). For more information, see http://www.html5rocks.com/en/mobile/responsivedesign/
Finally, you can keep the ", user-scalable=no" term if you really don't want the user to be able to zoom in and out, but for accessibility reasons it's often better to omit this, unless you're designing something like mobile maps.google.com, where you're manually handling pinch zoom gestures and you don't want to browser to interfere.
I developed a web page for PC and I wanted it to be compatible for iPad as well. However I did not do specific additions to my page for iPad compatibility. I only added the meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1;" />
When I view the site in iPad landscape mode, on the page load, it looks good. But when I switch to Portrait mode, the page looks cut off. When I switch again to landscape mode, the page looks cut off still further.
What other practices should I follow to make my page iPad compatible.I'm looking for recommendations/best practices on using %widths and things like that.My elements are currently of maximum 954px. Should I necessarily use % widths for iPad compatability? Any other helpful tips?
initial-scale=1.0 means your page will load 'full size' which is too wide in landscape mode. If you use that meta tag, you would usually use it in combination of sizing the page width to the exact dimensions of the screen. Since you are not, I would not use that meta tag at all and let the iPad's browser load the page normally (the browser will handle fitting it to the screen for you).
I have a div that is anchored to the bottom of a page (position: fixed), works fine in a normal browser, but on mobile browsers (iphone, android, & WP7) it appears offscreen. If i zoom in then zoom out on mobile, i can see the div reposition itself to where it thinks the bottom is. It would be great if somebody would give a quick fix or point me in the right direction, but really im looking a good reference on the difference between how mobile browsers handle coordinates and desktops.
Mobile browsers by default try to trick the rendering engine into thinking that the browser window has a more computer-like size.
This is needed because otherwise most web pages would be totally unusable on mobile devices with limited resolution (especially phones).
You can however use special tags to tell that the HTML page has been indeed designed for this kind of device, thus disabling all scaling and resolution virtualization logic in the mobile browser.
Something that can for example fix the problem for iOS devices and android devices is adding
<meta name="viewport"
content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
This tag in the <head> section will allow your page and javascript code to deal with real device pixels and screen size.
Define "mobile browsers". Android browser supports it, Safari for iOS supports it from iOS5.
Opera mini and others maybe doesn't support position:fixed.
You could check this... http://seesparkbox.com/foundry/fix_your_position_even_in_ios_4