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.
I recently put together a webpage for a client.
www.kinektd.ca.
Only when viewing on a mobile device the background banner images on the site get super zoomed in and pixelated.
Is there a mobile device media query I can add that ensures these images do not get zoomed in and pixelated on mobile devices?
Here is the css code that targets the background image;
.ts-home1-data-transferred{
background-attachment: fixed;
background-image: url(../images/background/main02_2-1920x1200.jpg) ;
background-repeat: repeat;
}
Can I target mobile devices and include certain coding that will solve the zoom issue?
Thanks in advance.
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 having an issue with the safari browser on ipad.
As I'm not having one by myself it's a bit difficult to try around, but I'm working on it.
The problem:
I'm having a background image fixed + background-size: cover
On all the browser on the desktop it looks fine. But the safari mobile on ipad shows the pic kind of huge and so really pixely.
The container has: (the most important)
width:100%;
background:url("...") no-repeat center center fixed;
background-size:cover;
I don't know how to fix it, do you have any idea?
Here you see a pic of the ipad: