I don't understand why the font-size property on iPhone "landscape" seems larger than portrait or desktop browser...
I have for body
font-size: 100%
and for text inside image 17px
PORTRAIT
LANDSCAPE
I assure that in landscape version text seems larger.
Include this to your site:
body {
-webkit-text-size-adjust: none;
}
Related
I have a web property and when viewing in an iphone, the fonts are all different even though they are set at 14px ....
font-size: 14px;
Here's a a screenshot from my iPhone 6 Plus:
Looking in chrome developer set for mobile, it is rendering fine but not on iPhone.
What is going on (link if answered before) and how do I fix this?
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 cannot seem to find the workaround for this.
On ios9 in mobile safari, if a webapp uses position:absolute and bottom:0 for the content area to cover the whole screen, when in landscape mode the safari navigation bar will cover the bottom of the content and you cannot scroll past it - it does NOT block in portrait.
portrait mode is fine, even when navigation bar is there
it's not an orientation change bug, happens if page is started in landscape
bug does NOT happen if the webpage is added to the homescreen, works perfect in landscape and content is visible (because navigation is not there)
So why does safari get bottom:0 correct in portrait but not landscape?
setting position:fixed on the html element magically fixed this
html { position:fixed; width:100%; height:100%; overflow:hidden; }
not sure why but must be a rendering bug that fixed works around
for some reason fixed also change the font size in landscape but I can work around that too
I had same problem, on orientation change if its in landscape mode, change your viewport meta to:
width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no
I'm doing this by simply finding $('meta[name="viewport"]') and replacing its content.
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/
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.