I have a bit of an issue, I am developing a full HD (1920x1080) website which I also want to be able to use on the iPad retina display (2048x1536) however the iPad is only showing that it has a resolution of (1024x768) despite the specs clearly stating otherwise (http://www.apple.com/uk/ipad/specs/)
If I create a div of width 1024 then it appears full screen on the iPad and a div of 1920 width forces the iPad to scroll?
Does anyone know why I cannot use the full retina display and am forced to 1024x768 resolution on the iPad?
That's an intended behaviour.
Since most web sites still specify their text size in pixels (12px), a retina screen would results in text that is much too small. To avoid this, Safari on the iPad 3rd gen and iPhone 4/4s tell web servers that they have 1/4 the resolution they really have. The text is then rendered in finer details by Safari but it also retains its intended size.
As a workaround, try setting the meta tag "viewport" in your site to allow for a greater resolution.
<meta name="viewport" content="width=device-width" />
Set your initial viewport size to half of it's original size thus creating a canvas that is double the size that the hardware returns (1024px * 2 = 2048px).
Related
When resizing the browser to the width of different mobile and tablet screens, the font seems fine readable and big enough, but when i check the website on my tablet the font seems smaller and not enough readable.
I thought that the browser is a real indicator of what the website should look like in smaller screen devices, but this seems not the case, as font looks small in my tablet screen.
So why font is not shown on the smaller devices as the same as the browser when resized to the same size??
The viewport meta tag tells the browser that your site is responsive ready and allows the browser to scale your site to device pixels rather than actual pixels. This should emulate a narrower viewport with the content appearing larger on screen at a more natural size. This tag should be placed in the head section of your HTML file.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
My site uses bootstrap 3 to accommodate devices of varying screen sizes. I use bootstrap's hidden-xs class to hide my page's unnecessary background image on small devices allowing them to focus on the important input components without having to zoom in. This works fine if you resize the browser window or adjust your monitors resolution. It also works great on low-res phones like the iPhone.
However, since bootstrap uses screen pixel size, this does not work on android phones with high resolutions. The result is, the phone user has to zoom in or work hard to select the appropriate inputs as they appear small on the phone's physically small screen.
Is there an easy fix for this so that users with high-res phones don't get the same look as the desktop users?
Thanks!
You can use this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
in the <head> section of your HTML document, to scale the document based on the screen width of the device you are using.
Check MDN for more information about the viewport meta tag and its usage.
Chrome shows that my viewport width is 1280px. However, my actual display resolution is 2560x1600px. The machine I use is a 13.3 inch macbook pro. Why the viewport isn't 2560px wide? Using <meta name="viewport" content="width=device-width, initial-scale=1"> doesn't make any difference.
my display settings:
Actually, it's not only Chrome, Safari shows the same thing.
The viewport for the browser is sized in "CSS pixels", that are not "screen pixels". The difference come from the "display density". In your case you have a "2x" display density, so each CSS pixel is a square of "2x2" screen pixels.
Just render a 10px size div in a page, take a snapshot and check it in your favorite bitmap image editing software: You'll find it's 20 pixels big... I mean 20 SCREEN pixels.
Some more about css pixels and display density:
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
Try "css pixels display density" on a search engine and enjoy it.
It's related to display settings of macbook pro. The default settings of 13.3 inch mbp is 1440x900. so the screen.width=1440 and the screen.height=900. If you adjust the default settings, screen.width and screen.height also changed
Display settings
Get width and height using chrome console
note: using the EasyRes get current display settings
EDIT: Because I maybe wasn't clear enough. I'd like to point out I'm NOT searching for "how to use viewport". I'd like to know how that actually works on background. How is the actual number of the viewport width computed on mobile device etc.
For example my smartphone has the smaller size 1080px but it returns 414 instead. Actually not just the viewport, also simple $(window).width() returns only 414. Please read the rest I wrote before those two paragraphs. Thank you.
I also changed the title to somewhat more explicit, but you still need the read the rest. Thank you.
I'm getting familiar with using the viewport, yet I still can't see how it actually works on background. If you read viewport dimension on smartphone with HD resolution, browser returns you viewport width way under 1920 or 1080 which is the actual phone's screen resolution.
1) How does the browser come up with those numbers? Is it detecting mobile device at general or mobile device is giving the browser actual screen size (real-life screen size)?
2) How does the browser differs between smartphone and much bigger tablet, if they both have the same resolution?
3) Media queries and other stuff relies on certain breakpoints. Those are actually hard written values in every responsive design. Usually something like 480 and 768px. Is that something I can also rely to be constant? No matter how far will the screen resolution go up on smartphones in the future? I mean like 4k on 5" screen.
4) How does PC screen fits to all this? Browser doesn't detect mobile device? or machine won't give it actual screen size? How does it know it just should use the pixels as pixels (minus scrollbars etc.)?
#Saix,
Have you searched out what you actually want? You will get your answer on first search.
Here, HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
You should include the following <meta> viewport element in all your web pages or a common Header file under the <head> tag.
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
An explanation of layout viewport and visual viewport can be found here.
I have read here and here that one should use
<meta name="viewport" content="width=device-width,initial-scale=1.0">
if one wants to optimize a webpage for mobile devices.
I would like to understand the consequences of this on the iphone4 in landscape mode. I would think that the following happens:
width=device-width
The device width of the iphone4 is 320px in landscape (see here) even though the iphone 4 has a screen-width of 480px in landscape mode. So the layout viewport is set to 320px.
initial-scale=1.0 This sets 1 CSS pixel to 1 device pixel (see here). Now since the iphone4 has a width of 480 device pixel, this implies for me that the visual viewport is 480px wide.
Thus, the layout viewport is set to 320px and the visual viewport to 480px. Doesn't that imply that the webpage is only shown on the first 320 px of the visual viewport and the remaing 160px are left blank?
To give a more concrete example: Consider the following webpage
<!DOCTYPE html >
<html >
<head>
<meta name="viewport" content="width=device-width;initial-scale=1.0" />
</head>
<body>
<div style='background-color:red;width:100%'>Test</div>
</body>
</html>
then in my understanding, this should only fill the screen of the iphone4 in landscape to 320/480=66,66% with red, because the layout viewport would get the length of 320px and since the div-size is relative to the viewport, width:100% is the same as width:320 px, see here:
the CSS layout, especially percentual widths, are calculated relative
to the layout viewport
I am assuming that I am wrong and that the iphone4 will probably display the above page in landscape with 100% red - but why? Have I misunderstood something?
Remark: I found this question Can I have more than 320px content in an iPhone, using viewport tag with device-width and initial-scale = 1? which is closly related to my question but with no answer.
Mozilla's documentation of the viewport meta tag explains this behavior fairly well (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)
For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:
<meta name="viewport" content="width=500, initial-scale=1">
By extension, if width=device-width resolves to 320 but the screen is 480 pixels wide, the browser will also expand the layout viewport to 480.
Also from the same document:
Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape.
I think that behavior has changed somewhat in recent versions of iOS, but it can be a confounding factor in figuring out what is going on, as on some devices the layout viewport will sometimes be different when a page is loaded in landscape vs. when the page is loaded in portrait and then rotated to landscape.
Mozilla goes on to say:
If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
I'm not a fan of this technique; I think the cure is worse than the disease in most cases.
It is because it is rotating page rendered in portrait mode. You will have to redraw page. Here is similar question .
I think that the problem you have is confusing the device-width and screen/browser resolution.
as in the example you post:
These pixels have nothing to do with the actual pixel density of the device, or even with the rumoured upcoming intermediate layer. They’re essentially an abstract construct created specifically for us web developers.
In other words, width/height mirrors the values of document. documentElement. clientWidth/Height, while device-width/height mirrors the values of screen.width/height. (They actually do so in all browsers, even if the mirrored values are incorrect.)
they are retina display and the difference is only in bigger pixel rendering from the iphone, so the browser will rendere full-screen even with 320px device-width in landscape. the big problem with iphone is that this difference don't change between portrait/landscape.
and
You can set the layout viewport’s width to any dimension you want, including device-width. That last one takes screen.width (in device pixels) as its reference and resizes the layout viewport accordingly.
where the device pixel (The screen) is different from visual viewport
<meta name="viewport" content="width=device-width;initial-scale=1.0" />
there device-width will have always 100% screen width.
<meta name="viewport" content="width=320px;initial-scale=1.0" />
there you should test if there are no changes on iphone or the DIV will extend out/gap of the screen in landscape
i think this source is correct only using media-query with device-width (not visible on iphone), because if you use normal media query you can see that the effective pixel-ratio of the browser rendering changes from 320px to 480px
max-width is the width of the target display area, e.g. the browser; max-device-width is the width of the device's entire rendering area, i.e. the actual device screen.
If you are using the max-device-width, when you change the size of the browser window on your desktop, the CSS style won't change to different media query setting;
If you are using the max-width, when you change the size of the browser on your desktop, the CSS will change to different media query setting and you might be shown with the styling for mobiles, such as touch-friendly menus.