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 have created a native iOS app a year ago, for most of the Heading title I had given the font size as System Bold 17.0
Now am developing a hybrid application for the same product and am using the same font size as font-size: 17pt
I believe the measurement in native iOS app is done as points which is same as hybrid, in that case, why does the hybrid app sizes looks little bigger than the native iOS font size ??
Am I missing something here ? Please help me
html {
font-size: 100%;
}
1px = 1pt
I did all the inspection and they are the same now.
As I scroll on iOS Safari only for my fixed position menu, it slowly scrolls with the page (but much slower pace?) until it disappears. It works in all other browsers/devices even the iOS simulator just fine...Any suggestions? My code is as stated here:
.mobile-nav {
background-color: #455660;
height: 58px;
position: fixed;
width: 100%;
top: 0;
z-index: 5;
}
Nothing fancy, just your ordinary fixed pos. navigation. Again works on Chrome for iOS, and safari iOS simulator, Safari for OS X, etc...just real iOS devices with safari seems to be the problem.
My site's left margin is not working on iPad (portrait mode). It's perfectly centered in landscape mode but when I turn it to portrait view my left margin seems set to zero. Can you help me with this one?
my website: www.inclouds.co.uk/test
I am using ipadpeek to view my site on ipad:
for my css code:
#container {
width: 990px;
margin: 0 auto;
position: absolute;
}
#header {
width: 990px;
height: 220px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
display: block;
}
Try changing the width to 100%. Your forcing it to be wider than the iPad screen in portrait.
Also rather than use that testing site, turn on Developer mode in Safari, connect your device to your computer and open the Web Inspector from Safari's Developer menu.
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.