If I set a div with to
height:85vh;
the bottom of the element id off the screen by quite some amount (the for the page is only about 40px high....)
To get it to fit on the page I have to set it to
height:55vh;
Also this only works in portrait mode, if I turn the ipad to landscape it still seems to think the viewport is portrait even if I refresh the screen!
Setting vh to 85 works on android tablets, windows tablets, and desktop browsers (android and windows tablets also resize the viewport on rotating the device). Why is ipad acting so odd?
I am having this issue now too, and I guess the temporary fix until it is fully supported, would be a Javascript hack. Check the viewport height with Javascript, and use it to set the height of the elements. On tablets, there will be 2 viewport heights, one for each orientation, so I would do a recalculate when changing the orientation.
A good guide can be found here: http://davidwalsh.name/orientation-change
Related
I'd like to try to work out a method of adaptive webpage design to coexist with both mobile and desktop browsers.
At first it looked like using Media Queries in CSS was what I needed, so I went with that, but it looks like Google Chrome is messing up what I wanted to do.
Compared to most browsers, for the most part only mobile browsers respond to the orientation media query, which seemed to be a good way to target a mobile browser, no matter the screen size. However, for some reason, Google Chrome not only responds to this, but will actually select Landscape and Portrait depending on the dimensions of the viewport (the window itself) and has nothing to do with the position of the screen itself.
This brought me to another potential idea. I noticed that on my mobile devices, device-width and device-height will swap positions depending on landscape and portrait modes, while Google Chrome on a desktop always reports the monitor's proper dimensions, even when Chrome thinks the window size qualifies as Portrait mode.
What I'm hoping to do is figure out a way to make a media query that determines if the device-width is greater than device-height. This should allow me to determine the true orientation of the screen, regardless of viewport size and Chrome's orientation value.
My eventual goal is to be able to design a page with a specifically mobile-friendly layout for any device that reports Orientation: Portrait AND the Device-Width is less than Device-Height, which should only ever happen on a true mobile device in portrait mode (or the rare sideways PC monitor, which I don't mind accidently targetting), while serving a landscape/desktop friendly layout to any device with a screen that is wider than it is tall.
I am adamantly avoiding using any form of Javascript, useragent query, or server-side scripting to accomplish this. Media Queries seem to be the fastest and least costly (processing wise) method to have a page that actively shapes itself to the current device and will also shift its position in real-time as the mobile device rotates between orientations.
My ultimate question for this post is: Can I specify some form of expression in a media query in CSS that will simply compare the Device-Width and Device-Height and display one style when the width is greater than height, and vice versa?
Something like:
#media screen and (device-width > device-height) //true landscape mode
#media screen not (device-width > device-height) //true portrait mode or square screen
After some tweaking and testing, I came up with the following combination of media queries that seem to do what I'm trying to accomplish.
#media only screen and (orientation: landscape) and (min-device-aspect-ratio: 1/1)
//This targets any screen that is in true Landscape orientation, including desktop browsers. This should also target square screens where the browser reports landscape orientation.
#media only screen and (orientation: portrait) and (min-device-aspect-ratio: 1/1)
//This targets strictly desktop browsers that have a window resized into what the browser considers "portrait" mode. This works in Chrome, Firefox, and MS Edge (haven't tested others). More specifically, this targets any browser that reports portrait mode, but where the screen is actually in landscape position. This may also target square screens where the browser reports portrait orientation.
#media only screen and (orientation: portrait) and (max-device-aspect-ratio: 1/1)
//This strictly targets devices that are actually in portrait orientation, mainly mobile devices (although it may target desktops with rotated monitors)
This may also target square screens reported to be in portrait mode, so you may need an additional query that targets exactly square screens.
I'm happy that you got the way to do what you where looking for, but I think readers should take in account a couple of things:
First, as you said, Monitors can also rotate, in fact is very common in offices to see that kind of monitors.
Second, in mobile you can also have a Landscape viewport in Portrait orientation or viceversa, as you can split the screen in two.
Third, devices such as the Pixel 2XL and iPhone X have a proportion of 18:9 and 19.5:9 respectively, which means that half screen will return Landscape.
Finally, what really matters is the viewport orientation because is what determines the content area, whether is a desktop or a mobile screen. If you resize your desktop window you should also thing about doing some responsive to optimise your available space.
As bonus, in iPhone width referes to viewport while device-width refers to the screen width, which, unlike Android, is always the larger side of the screen.
I'd love to have an easy answer to your question, but there is not. Doing responsive is not easy. Maybe this article (EN) can help you. It gives some clues to split between Desktop vs Laptop, Laptop vs Tablet and Tablet vs Mobile.
I am trying to master responsive design. I created this media query to cater for smartphones
#media screen and (max-width:500px) {
/* css rules for smartphones */
}
However, when I look on my iPhone, it is not showing these rules, even though when I resize my browser to under 500px the rules apply.
So I added in jquery
width = $(window).width();
$('#info').html(width);
This showed me that my iPhone was actually 980px wide, which I thought was strange, as I was sure I read it was only 320px wide. So this lead to great confusion. After lots of playing around I seemed to have got it working with this:
#media screen and (max-device-width:500px) {
/* css rules for smartphones */
}
But I have no idea why it works with this, and what I have actually done.
Can someone tell me what "device" means? And why is the iPhone resolution 980px according the jquery?
When using media queries, you should also use:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
in your header.
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
For most devices the screen resolution/display size is equal to the viewport. This is true of desktop and laptop computers, however for mobile devices this may not be true!!
Many phone browsers scale web pages down to a wider viewport width to fit them onto the screen. This is sometimes called overview mode. These browsers allow the user to zoom in and scale the pages up to view the bit they want to see. For example, although a device screen might have a width of 320px the viewport can have a width of 980px. In this case a web page designed at 980px or less will fit completely on the screen.
The difficulty comes with different mobile devices and mobile browsers as they have different viewport sizes. Here is a short list of some popular mobile browser viewport sizes:
Opera Mobile browser viewport 850px
iPhone safari browser viewport 980px
iPad (landscape & portrait mode) viewport 980px
Android browser viewport 800px
IE mobile browserviewport 320px
Many phones have a different pixel density or dpi than the desktop 72dpi, so setting target-densitydpi=device-dpi is a good idea to prevent blurry images due to scaling effects.
The viewport meta tag for the touch sensitive sidebar version of this blog is:
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi |high-dpi | medium-dpi |
low-dpi]
It seems that video element sizing behavior is different between mobile to desktop:
on http://www.quirksmode.org/html5/tests/video.html
on desktop chrome its width is about 35% of the browser. on ipad chrome is about 10%
any ideas why? where can i get the rules to this?
thanks much
Lior
Apple documents this non-standard behavior in this document, which is worth reading because it covers some other things you're going to have to worry about with video on the iPad.
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1
Default Height and Width on iOS
Because the native dimensions of a video are not known until the movie metadata loads, a default height and width of 150 x 300 is allocated on devices running iOS if the height or width is not specified. Currently, the default height and width do not change when the movie loads, so you should specify the preferred height and width for the best user experience on iOS, especially on iPad, where the video plays in the allocated space.
Also, have a look at this related question:
Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width
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).
I've been using min-width: 600px as my breakpoint in my CSS media queries. My rationale was that at 600px and above I'd capture tablet devices (Kindle Fire, iPad, etc) and below 600px would capture all of phone devices.
It turns out that while the iPhone plays nice by doubling its pixels, but still reporting being 320px x 480px, there are a ton of Android phones out there with resolutions like 700px x 1280px. The trouble is, how do I capture these devices without giving them a tablet-like interface?
Normally I'd just let the content respond to the pixel resolution of the device, however, a 1280px layout on a 4.3in screen just doesn't look right, especially since my application deals with a lot of form elements, which on a phone you want to span the entire width, but on a tablet or desktop you do not.
One good option is to tailor your media queries to your content, not arbitrary device pixel sizes, by using ems.
Please use responsive css framework to avoid this kind of problem. I would suggest using Foundation or Twitter Bootstrap