Targeting CSS code for only Iphone5 in chrome - html

Question

i have done the website it is working fine in all the mobile devices but in Iphone5 the font size not accepting. it is bigger and bolded than what i have give in css code. below the code i have given for common
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
so i want any specific code do i need to add for IPHONE 5. thanks

Answer 1

In order to target mobile devices, you will need to make sure you have the following in your header:
<meta name="viewport" content="width=device-width, initial-scale=1">
And then add the mobile media query in your stylesheet:
#media (max-width:767px) {
/* Add mobile specific styles here */
}
I know in your question you want to target only an iphone5, however it is a good idea to add one media query to target all mobile devices and you won't have any issues and can add styles for mobile only within said media query.
Edited Answer
/* iPhone 4/5 portrait mode */
#media (max-width:320px) {
p {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
}
}
/* iPhone 4/5 landscape mode */
#media (min-width: 321px) and (max-width: 480px) {
*/ Styles go in here */
}

Answer 2

Add this medai query for iPhone 5 only
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}

Answer 3

I'm not sure if it is the best way to do this, but you can set styles in js/jQuery when detecting iphone.
jQuery(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
/*set some style here*/
}
});
Also, if your text is too big on iphone, you can try:
-webkit-text-size-adjust: 90%;
Anyway, Helvetica Nue is not standard font, so if you won't use external fonts import, they can look diffrent on some devices.