I don't understand why the width of my test web page is blocked at 769px in landscape orientation (instead of being 1024px) when I view it on my iPad, since nothing in my markup or CSS defines such limit.
Any suggestion is welcome.
Related
For my app's purposes I need to know all possible screen sizes when getting some content from internet. It's turned out to be hard to define screen widths for iPad Split View/Slide Over modes. F.e.: iPad Air 2 has 320px app's window width in slide over, but iPad Pro - 375px in the same mode. It's definitely not 33% of full width claimed by Apple. Thanks.
I am trying to get a legacy web application to run "properly" on mobile devices (where "properly" mainly means tweaking CSS so that text is readable and superfluous images and effects are hidden). Due to various reasons (many graphics files which cannot be changed right now) I have decided on a width of 480px width for phones and 630px width for tablets, and 1024px for desktop browsers.
So far, I have created two CSS groups for smartphones and tablets:
#media only screen and (min-width:631px) and (max-width: 1000px) { ... }
and
#media only screen and (max-width:630px) { ... }
which each have a fixed page width (480 and 630 pixels respectively) and some parts of the page modified (for example, the phone version has a dropdown menu instead of a hover menu).
On desktop browsers, e.g. Chrome, this works fine - when I change the window width the page layout changes accordingly. On iPhone and iPad, however, this doesn't work fully:
the non-retina iPad (768 pixel width) shows a white border left and right to the (630px wide) page, the CSS is selected correctly though;
the retina iPhone shows the tablet version (since it has 640px width), but I want it to use the lower-resolution version. Same for other hi-res (say >140dpi) displays.
Other tablets and phone (emulators though) also mostly select the right CSS media query group but do not zoom the page to full width.
How do I get the page width always to occupy 100% of the available width, regardless of the device width; i.e. zoom the page to full width? I tried playing with the "viewport" parameter, but this is a fixed parameter that cannot be modified depending on user-agent or real device width (JS hacks that try to do this didn't work so far).
Any ideas welcome!
I am creating a fixed width website in Drupal and I'm having trouble getting the website to fill the viewport on the iPad ( have not tested smaller devices yet).
If you look at cc-photobooths.mckernanms.com in portrait view you will see that the form runs off the screen. It should'nt.
Then if you rotate to landscape view it still is off screen. Then back to portrait and it stays zoomed in instead of going backmtomthe original view.
Any ideas how to fix this?
iOS devices use the Viewport metatag for setting resolutions specfic to its devices. You can set this and should help solve your issues.
Example Metatag for a 590px wide Viewport
<meta name="viewport" content="width=590">
I believe this link is a good place for reference on that. If you have any questions please ask.
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Everywhere I read, the width of the screen on the Ipad 1 is 1024 x 768.
I have built a site using bootstrap and the collapsable nav button appears when viewing the site in landscape mode on my iPad. It should not. It should only appear for viewports that are less than 1024px in width.
I then sniffed out the width as jQuery sees it using $(window).width(); and it is reporting only 768px x 467px;
I have the following metatag:
meta name="viewport" content="width=device-width"
In landscape mode the iPad zooms content in so that the effective viewport with is the same as in portrait mode.
Try this - ISTR it's supposed to force all windows to 1:1 zoom, and prevents user zooming.
<meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
iOS6 introduced a new full-screen mode for Mobile Safari. It is only available in landscape orientation and hides the browsers top and button bar, as well as the devices status bar.
How is it possible to detect the new mode using media queries? I tried using the width media query, but couldn't get it to work.
I was able to differentiate them using JS document.documentElement.clientHeight, which returns 208 on default and 320 on full-screen mode.
Btw: I'm not talking about starting the app from the home screen, which is a different kind of full-screen mode.
So, height is 320px, orientation is landscape. Here's the media query:
#media only screen and (height : 320px) and (orientation : landscape) {
/* rules here */
}