Am trying to juggle a pair of "then" and "now" JPEG images on an iPad running Safari. In my BODY declaration I catch onload and onresize and call JavaScript which looks at window.innerWidth and window.innerHeight. Problem is, Safari appears to report accurate information for landscape orientation of iPad but not for portrait. For landscape, Safari reports inner 981x644 and outer 1024x673. But for portrait, Safari reports inner 980x1185 and outer 768x929. My JavaScript looks at whether the orientation is landscape or portrait and then resizes the pair of JPEGs for side-by-side or top-and-bottom, respectively. But that doesn't work well when Safari is lying about the dimensions. Can anyone explain what is happening here? Thanks.
I cannot explain why it does so (it's driving me crazy as well)
But I can offer a solution to your problem: do it with CSS instead of JS!
You can do it using media queries to build a different layout for portrain and landscape:
#media all and (orientation: portrait) {
...
}
#media all and (orientation: landscape) {
...
}
and using CSS3 to auto-size the images while keeping their aspect ratio:
background-position: center;
background-repeat: no-repeat;
background-size: contain;
Here is a JSFiddle with all the required code: http://jsfiddle.net/BULxm/
Hele is a direct link to the results, for testing on an iPad: http://fiddle.jshell.net/BULxm/show/
Related
I made a website which needs to look in an exactly same way on all the screens.
I designed it with width = 320 and auto height.
<meta name="viewport" content="width=320">
Now no matter what size of the screen the website scales nicely to fit the screen. It's important for me that the website SCALES and not RESIZES so I cannot use in this case this code:
<meta name="viewport" content="width=device-width">
But while it works fine on various phone emulators and a few different smartphones it doesn't scale on iPhone 6. It just shows the whole website in the top,left corner with black bars on the right and bottom.
How can I force iPhone 6 to zoom the page so this 320px is zoomed to match iPhone's screen width?
using viewport may not be the best option for your case.
I think it could be better if you use css #media because you need to have width = 100%
for example
#media screen and (max-width: 320px) {
div {
width: 100%;
padding: 5px 10px;
}}
so no matter if user uses iphone 6 or iphone 4, the screen will be perfect.
I have simple HTML5 game and I would like to set different CSS values for selectors if the game is running on iPad.
For example:
Normal value for all devices (without iPad):
#playIcon {
position: absolute;
color: white;
z-index: 10;
top: 15vw;
left: 33%;
}
and for iPad device should be value:
top: 20vw;
How can I do this in simple and effective way?
Media query for iPad in landscape and portrait :
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
only landscape, add :
and (orientation : landscape)
only portrait, add :
and (orientation : portrait)
If you don't want to use media queries because you want to target iPad only, you can use this script (source : Detect iPad users using jQuery?) :
var isiPad = navigator.userAgent.match(/iPad/i) != null;
And for example (JS):
if(isiPad) {
var playIcon = document.getElementById('playIcon');
playIcon.className = "ipad";
}
(CSS):
#playIcon.ipad {
top: 20vw;
}
I haven't tested the js way, so I hope there is no mistake ...
Don't think you can achieve iPad detection with css.
With Javascript it's possible to check the user agent.
var isIpad = (navigator.userAgent.match(/iPad/i) != null);
If you want to target iPads only by css, the closest you can get is probably by using
#media only screen and (-webkit-min-device-pixel-ratio: 1) {}
This will also apply to any device with more dense pixels (like retina displays), which are a lot of devices. You can also add iPad display width and height to target it more precisely but there's no sureshot for targeting only iPads just with css.
Anyway, well designed product should be ok with non-specific styling, just using media queries for different viewports. Seeing what you are trying to do I assume you are trying to cope with some sort of iPad specific toolbar. These issues are tricky because you cannot be sure that with the next version of iOS you won't have to restyle it again. So if possible, try to solve this a way you won't have to cope with specific devices...
I'm working on a new website using em-based CSS media queries. In the past, I've always used px-based media queries. I wanted to try something new. I have things set up in such a fashion that most phones (in portrait), most phones (in landscape) and tablets (in portrait), and most tablets (in landscape) will see differences in the layout.
Everything works, as expected, on desktop browsers (IE, Firefox, Chrome), Android (Android browser, Chrome), and Windows Phone (IE). iOS (Safari) displays the portrait version, as expected, but switching to landscape keeps the portrait layout. This has been tested on an iPhone 5 (iOS7), iPad 2 (iOS7), and iPhone 4s (iOS6) and they are all consistently inconsistent.
HTML:
<meta name="viewport" content="width=device-width">
CSS:
/* portrait phone (< 480px) */
#media screen and (max-width:29.9999em) {
}
/* landscape phone and portrait tablet (>= 480px < 960px) */
#media screen and (min-width:30em) and (max-width:59.9999em) {
}
/* landscape tablet and normal monitor (>= 960px < 1440px) */
#media screen and (min-width:60em) and (max-width:89.9999em) {
}
/* bigger monitor (>= 1440px) */
#media screen and (min-width:90em) {
}
/* big monitor (>= 1920px) */
#media screen and (min-width:120em) {
}
So, the iPhone (landscape) should fall between (min-width:30em) and (max-width:59.9999em) and the iPad (landscape) should fall between (min-width:60em) and (max-width:89.9999em). Unfortunately, they both fall one query narrower.
While searching through stackoverflow, I found this post that says the default font size in mobile Safari is 12px (not 16px, as normal). I had not seen that on any other sites, but the calculations seemed to make sense (further calculating doesn't seem to put them in different media query groups, though).
In response, to that post, I set a base font-size of 16px.
CSS:
html { font-size:16px; }
My thought was that it would over-ride the browser's default setting and match with every other browser that was being tested. Unfortunately, mobile Safari is still using the portrait layout when in landscape.
I had read a few pages that mentioned needing to refresh with Safari (not sure if it was mobile or desktop), so I even tried that.
Does anyone have a reason why this is happening? As mentioned, I've created other sites using px-based media queries and they function as expected.
In media queries, the em is based on the browser's default font-size (note that the user can modify this). There's nothing you can do to alter this.
Related:
http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/
http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/
This was the fix that ended up working...
CSS:
body {
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
-webkit-text-size-adjust:100%;
-moz-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
I'm new to web development and responsive design, so this might be an idiotic question. Unfortunately, I have searched and searched and cannot find an answer.
When I write a media query for Kindle Fire landscape, it effects the iPad landscape and vice versa. I cannot separate them. I have tried many things and nothing works.I don't have a problem in portrait mode or with other devices. I assume this is a problem here because the resolutions overlap, but I thought the code below would make them mutually exclusive. It doesn't.
Kindle landscape
#media screen and (min-width: 600px) and (max-width: 1024px){ #help{color: red;}}
iPad landscape
#media screen and (min-width: 768px) and (max-width: 1024px){/default color is white for desktop version so I don't specify the color in this query/ }}
The code above will make iPad #help red. If I reverse the order and put iPad first and Kindle second, then #help is white in Kindle.
And this code below makes the iPad landscape look fine, but Kindle is all broken.
#media screen and (max-width: 1024px){ /code/;}}
What am I doing wrong??? How do I write code so that I can make my website look right on Kindle without messing up the iPad? Do I need something else, like javascript?
Why isnt the following media query being picked up on iPads in landscape mode?
#media all and (min-device-width: 1000px) {
css here
}
Or
#media all and (min-width: 1000px) {
css here
}
I want this css to target any browser which is 1000px wide or over, not just ipads. For this reason id rather work with the 2nd option of min-width not min-device-width if possible. Both versions work fine with firefox on my PC.
Thanks
The iPad is always reporting its width as 768px and its height as 1024px, so you have to find out how it is rotated with orientation and use min-device-height:1000px like so:
/* This will apply to all screens with a width 999px and smaller */
* {
color:green;
background-color:black;
}
/*
This will apply to all screens larger then 1000px wide
including landscape ipad but not portrait ipad.
*/
#media (orientation:landscape) and (min-device-height:1000px),
all and (min-width:1000px) {
* {
color:white;
background-color:red;
}
}
Results:
iPad
Portrait - green text - black background
Landscape - white text - red background
iPhone
Portrait - green text - black background
Landscape - green text - black background
Computer (resolution)
1680x1050 - white text - red background
800x600 - green text - black background
Using chrome & firefox (does anyone even use IE anymore?)
References:
w3 media queries
Safari CSS Reference
Optimizing Web Content
From http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
/* iPad [portrait + landscape] */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.selector-01 { margin: 10px; }
.selector-02 { margin: 10px; }
.selector-03 { margin: 10px; }
}
It looks like the screen attribute may be required.
If found this works great for the new iPad
#media screen and (orientation:landscape) and (min-device-height:1000px) and (-webkit-min-device-pixel-ratio : 2) {
* {
color:white;
background-color:red;
}
}
For the record, I'm not sure why
#media (min-width: 1000px) {
/* css here */
}
didn't work for you. Possibly something changed with the iPad since this question was first posted?
Here's a working example:
live view: http://fiddle.jshell.net/panchroma/Bn4ah/show/
edit view: http://fiddle.jshell.net/panchroma/Bn4ah/
Also be sure to include
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the head of your page.
I was trying to use a simple media query like this:
#media only screen and (min-width : 768px)
{css here}
but I wouldn't trigger on an iPad pro 10.5' I was testing on, I increase it to 900px (for portrait) and it worked just fine, I think because of the retina display you need to compensate, it may work fine on old iPads non-retina.
Trying to write a media query for tablet, I actually encountered the problem of the iPad underreporting its dimensions. When I tried to use #media screen and ( min-width: 768px ), my styles were being applied to other tablet devices, but ignored by the iPad. I started playing around with the Responsive device model in developer tools, and I stumbled onto the solution. For some reason, my styles would apply when I sized the screen down to 760px. So, I edited the media query to read #media screen and ( min-width: 760px ) and everything started working as expected.