@media selectors for the iPhone

[john love]

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

@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:

@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

[VIPStephan]

Shouldn’t the max-device-width media query take care of that? Or is the AND operator not exclusive in CSS?

[john love]

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

[Doctor_Varney]

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

[VIPStephan]

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.

[Doctor_Varney]

Perhaps I should rephrase the question...

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

Dr. V

[john love]

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:

/* css/default.css */

#header, #poemWrapper, #footer {
	text-align: center;
}

#poem {
	width:      28em;
}

Now, here iss the thin version of the .css:

/* 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