0

I am working on building a site for responsive design.

I have a certain CSS style as follows:

/* when viewport height less than 320px */
@media screen and (max-height: 319px) { /* TRIED FOR IPHONE -- CAN'T GET TO WORK YET */

    #footer {
        font-size: 65%;
        line-height: 110%;
        margin-top: 12px;
    }

}

I tested it on my iPhone in landscape mode and the font-size does not change to 65%, nor do any of these 3 styles take effect. Is this a valid and proper way to detect the screen height dimension for an iPhone?

6
  • Are you placing this code before or after your regular CSS?
    – Blender
    Dec 29, 2012 at 18:12
  • Yes, in the cascade, this is the very last style block I have. Right above it I have a style for max-width for iPhone portrait and it works fine. Dec 29, 2012 at 18:15
  • if it makes a difference I have an iPhone 4 Dec 29, 2012 at 18:22
  • can you post the entire code on a jsfiddle or better yet, give the website link? You are probably missing a bracket.
    – John Smith
    Dec 29, 2012 at 18:23
  • I'm getting a login panel. Do you mean the homepage? You linked to homepage/OMS
    – John Smith
    Dec 29, 2012 at 18:33

2 Answers 2

2

Could you try using a different media query?

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

@media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
}

I have never had a problem with media queries. After testing your website through an online iPhone emulator in both portrait and landscape mode, the font-size is set to 65%:

http://www.testiphone.com/

However, if the media query above does not work, could you try changing your viewport?

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
3
  • What is interesting about the link you sent me to @JohnSmith is none of them use the max-height attribute. They do use orientation:landscape. Maybe I should try that. Dec 29, 2012 at 18:47
  • 1
    if it's a portrait/landscape issue, you may want to change your viewport chriscoyier.net/2009/01/25/…. Overall if none of this works, I'm stumped.
    – John Smith
    Dec 29, 2012 at 18:51
  • Every "trick" I try that you suggested or sent a link for, works on my browser. When I go to the actual iPhone it does not work. I'm stumped too, but thanks for helping @JohnSmith! Dec 29, 2012 at 19:22
0

jQuery

$(document).ready(function(){
   if($(document).width() <= 320){
      $("#footer").addClass("newclass")
   }
})

CSS

.newclass {
    font-size: 65%;
    line-height: 110%;
    margin-top: 12px;
}
6
  • So @Enve, are you stating that I cannot use @media screen and (max-height: 319px) {} in my CSS? Dec 29, 2012 at 18:40
  • It is CSS3 and not supported on all browsers
    – Idrizi.A
    Dec 29, 2012 at 18:41
  • 1
    who uses IE7 and IE8 on an iphone?
    – John Smith
    Dec 29, 2012 at 18:42
  • What about the iPhone4 in Safari? That is what the style is directed at. Dec 29, 2012 at 18:42
  • I think jQuery is the best way. You also have aded jquery to your site
    – Idrizi.A
    Dec 29, 2012 at 18:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.