Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question @media selectors for the iPhone

    My challenge is the proper use of @media selectors for just the iPhone, such as:

    Code:
    @media screen and (max-device-width:480px) and (orientation:portrait) {
    #poemWrapper {
    	text-align:     left;
    	}
    	
    #poem {
    	width:          auto;
    	color:          #00f;     /* just for testing */
    	}
    }
    This inline approach is not working for me.

    I get a weak sister going with:

    Code:
    @media screen and (orientation:portrait)
    but that will activate the iPad as well which is not what I want. I want to single out iPhone in the portrait orientation.

    BTW, using only screen, versus just screen doesn't fix the problem.

    HAALP!

    John Love

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,661
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Shouldn’t the max-device-width media query take care of that? Or is the AND operator not exclusive in CSS?

  • #3
    New Coder
    Join Date
    Mar 2007
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Your question is a good one. The sample code I've seen out there has the and boolean logic linking max-device-width and the orientation.

    What is driving me nuts is that I do not own a smartphone and therefore I am forced to use the so-called emulators whose effectiveness I've come to doubt .. in short, do they accurately emulate??

    In addition, these emulators do not handle re-direction.

    Bottom line .. I guess I really don't know if:

    @media only screen and (max-device-width:480px) and (orientationortrait)

    bombs on a real mobile phone .. it definitely does on 2 so-called iPhone emulators.

    Many, many folk testify that the above @media works, but I just cannot confirm it.

    John Love

  • #4
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    I was told that scaled CSS layouts fit mobile phone screens. I don't know what you two are talking about. I've never seen or heard of those CSS rules before.


    Would my scaled div layout work on a mobile phone? I don't use one but I suppose I could find someone who would let me borrow theirs.

    I'm astounded that anyone would want to surf the internet on a mobile phone in the first place but I suppose it might be handy for some things.

    Dr. V
    Last edited by Doctor_Varney; 09-03-2010 at 07:32 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,661
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Dr. V, I’d suggest you read up on media queries. And maybe this helps you too, John. I suppose the emulators are emulating relatively close to reality but of course they are never a full replacement for a real device. But your very first media at-rule should address those devices that aren’t larger than the specified width. Maybe you can also work with the “resolution” query.

  • #6
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Perhaps I should rephrase the question...

    What sort of websites can't be seen on mobile phones?

    Dr. V
    Last edited by Doctor_Varney; 09-04-2010 at 01:25 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #7
    New Coder
    Join Date
    Mar 2007
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I think??? I've got the iPhone licked, not because I've got an iPhone, but because I do have an iPad (which I love).

    Anyway, to continue, I'm really having problems with Firefox recognizing the media css. As noted below, Safari does work properly, but Firefox doesn't seem to recognize the linked media css.

    Let me please start from the beginning ...

    I'm trying to center a poem, but if the window width gets too small, i.e. landscape -> portrait, I want the poem to (1) left align and (2) word-wrap. Here are the 2 .css files.

    First, the default case:

    Code:
    /* css/default.css */
    
    #header, #poemWrapper, #footer {
    	text-align: center;
    }
    
    #poem {
    	width:      28em;
    }
    Now, here iss the thin version of the .css:

    Code:
    /* css/thinMobile.css */
    
    #header, #poemWrapper, #footer {
    	text-align:    left;
    }
    
    #poem {
    	width:         auto;
     /*
    	color:         #00f;     // just for testing
     */
    }
    It successfully left aligns, but when the window width gets smaller than the width of the poem, there is zero word wrap in Firefox. Word wrap happens in Safari, SeaMonkey, but not in Firefox or Navigator 9. BTW, I know the Browser is accessing the thin version in Safari and SeaMonkey because of my color test -- but not Firefox nor Navigator.

    I have read that Firefox does incorporate HTML 4, so does anyone have any ideas.

    Here's the link.

    Appreciate it.

    John Love


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •