Open andykirk opened 10 years ago
You can test in safari 4 if you use browserstack.com, you can choose to test in os x 10.6 snow leopard and it allows this cheers!
Thanks! I didn't realise Browserstack went back that far. All the tests mentioned originally was done on stuff I have on my desk! I've updated the post.
Glad to help.
I just ran tests on IE 6,7,8,9 and 11 and so you can update that it does not affect any version of ie 6-11 now [since this is what I have on my desk at the moment and you already tested 10]
Just tested it on Safari 4.0.0 on windows (yes i have it installed...) and it works fine there as hoped.
Thanks - Updated. (I had already tested on IE8 but forgot to include)
No worries, the more people that test these on the more locations the better the results :)
Yep :-)
Ideally, I'd like a hack that only affects old Android, NOT Safari 4, but I can live with that.
Tested on droid chrome, on kitkat 4.4.2 on galaxy s3 and no chrome either for both 0\0 and 0- (which is the way it is supposed to be, so that is verified) - the droid browser seems not to show it though. Is there a set of browsers that like it or have we found it's exact stats? (obviously we need to test on 4.3 if it likes 4.2 base browser).
Ok. Mine is a Galaxy Ace 3 4.2.2 (as mentioned above and it works fine). I'm using this page to test both the original hack and the variant:
http://www.gridlight-design.co.uk/experiments/android-hack.html
I thought that is what you meant, so you are seeing red or green then?
on the Ace it's Green (with no yellow bar). On the 2.3.7 'old Android' (Xperia) it's red with a yellow bar. Both as expected.
Cool - would love to find out where it goes from red to green in the droid history.
My testing of chrome for 0\0 it only works on Chrome 5- (tested on the windows version of Chrome)
Tested further: Safari 3 also works (for both 0\0 and 0-) (So they both work then in Safari 3-4)
Thanks for all your help on this.
The Chrome 0\0 would be a separate issue for the original hack, I guess.
Correct, I just posted it here since it was the 'big brother' of the other one, and it was the place we both started. :)
btw - I posted this already last week, and it might interest you, if you make a change to the regular webkit rule to be min of 1.1 (1 is a normal desktop or laptop computer) then you have the hi-def that mobile phones and tablets use now. I would love to know if it works for you. If you didn't see it, here it is for hi-def models of Android/iPad as follows: iOS (iOS Safari 3.2+), Android (Base browser 2.1+ & Chrome 22+, Opera Mobile 10+) :
@media screen and (-webkit-min-device-pixel-ratio:1.1) {
.selector { property:value; }
}
(from this thread: [https://github.com/4ae9b8/browserhacks/issues/39]) I posted a mirrored one there for firefox mobile as well. You have to scroll down a bit though...
Not sure if understood you 100%, but I made another version of my test page (http://www.gridlight-design.co.uk/experiments/android-hack-2.html) but changed the 0- hack to the one you just mentioned:
2.3.7 - Red 4.2.2 (native, chrome) - Red (opera mini, firefox) - Green Win 7 - Green on all browsers
Is that what you wanted to know? Want me to test more?
Actually if you put the 0\0 back to 0\- your test page will have this effect:
your hack will affect old droids and safari 3-4, mine will affect newer droids and iDevices
they would work well i think
mine is for new androids not old ones :)
Which android versions?
body {
background: green;
}
/* Old Android and Safari 3-4 */
@media screen and (min-width:0\-) {
body {
background: yellow;
}
}
/* New (Hi-Def) Android */
/* iOS (iOS Safari 3.2+), Android (Base browser 2.1+ & Chrome 22+, Opera Mobile 10+) */
@media screen and (-webkit-min-device-pixel-ratio:1.1) {
body {
background: red;
}
}
Desktops/Laptops would be green Old droids would be yellow New droids would be red
Dying to know what happens in your testing since you have both old ones and new ones.
Ok, I updated the test page:
"Desktops/Laptops would be green" - YES "Old droids would be yellow" - YES (and Safari 4) "New droids would be red" - ONLY on Native, Chrome and Yandex. Green on Firefox and Opera Mini/Mobile Classic
okay add this block to affect hi-def firefox mobile 3.5+
/* For Firefox hi-def mobile (3.5+): */
@media screen and (min--moz-device-pixel-ratio:1.1) {
body {
background: orange;
}
}
firefox does not exist on ipad, so android (and probably also windows mobile hi-def but i do not have one of those to test)
Firefox on new Android now blue! :-)
I don't have a windows mobile to hand either.
I really like this thread!
Your addition to mine is cool because now we can target both.
Great :-)
Before you posted yours I was using setting webkit max pixel ratio to 1 (desktops, laptops, old mobile devices) but it was not as direct as yours.
/* Old Tablets and Phones (Not Hi-Def), Laptops, Desktops */
@media screen and (-webkit-max-device-pixel-ratio:1) {
body {
background: purple;
}
}
They probably both have their uses, like if we use body, then my max:1 version, then yours, then my min 1.1 versions, then we probably cover just about everything - though not sure my old (max:1) one is needed now.
btw - great test set, glad to work with you on this
Likewise :-) Thanks for all your input.
You never know when you may want to use the max:version, so no need to get rid of it, I guess.
True
this is the matching firefox old one since I posted the other...
/* For Firefox (non hi-def) mobile (< 3.5) and also desktops/laptops: */
@media screen and (max--moz-device-pixel-ratio:1) {
body {
background: orange;
}
}
It's orange on Win 7 and OSX too...
correct, you need to put the old ones just after the top body one because they also affect desktops and laptops (old machines and laptops/desktops have pixel ratio 1), not after our other ones i updated the specs above
This is the order you should have them for best results (and for clarity of reading):
body {
background: green;
}
/* Old Tablets and Phones (Not Hi-Def), Laptops, Desktops */
@media screen and (-webkit-max-device-pixel-ratio:1) {
body {
background: purple;
}
}
/* For Firefox (Not Hi-Def) mobile ( 3.5), Laptops, Desktops */
@media screen and (max--moz-device-pixel-ratio:1) {
body {
background: orange;
}
}
/* Old Android and Safari 3-4 */
@media screen and (min-width:0\-) {
body {
background: yellow;
}
}
/* New Android */
/* iOS (iOS Safari 3.2+), Android (Base browser 2.1+ & Chrome 22+, Opera Mobile 10+) */
@media screen and (-webkit-min-device-pixel-ratio:1.1) {
body {
background: red;
}
}
/* For Firefox hi-def mobile (3.5+): */
@media screen and (min--moz-device-pixel-ratio:1.1) {
body {
background: blue;
}
}
I updated the above to add in both old max:1 ones of mine, i see your update and it is probably good
Ok, I've created a new page:
http://www.gridlight-design.co.uk/experiments/android-hack-3.html
May be getting a little muddled. Have a look and see if it's what you expect. I'll post my results shortly.
I will have to take a bit of time to look at it - I like what you are doing with it by the way.
Firefox: Win 7, OSX - ORANGE Firefox: New android: BLUE
Chrome: Win 7, OSX - PURPLE Chrome: New android: RED
Safari 7: OSX - PURPLE Safari 5: Win 7 - PURPLE Safari 4: OS X Snow Leopard - YELLOW
Opera: Win 7, OSX - PURPLE Opera: New android - GREEN
Old Android - RED (this should be yellow. It means that New Android is also applied)
then you need to swap these two:
/* New Android */
/* iOS (iOS Safari 3.2+), Android (Base browser 2.1+ & Chrome 22+, Opera Mobile 10+) */
@media screen and (-webkit-min-device-pixel-ratio:1.1) {
body {
background: red;
}
}
/* Old Android and Safari 3-4 */
@media screen and (min-width:0\-) {
body {
background: yellow;
}
}
so it should be this instead:
/* Old Android and Safari 3-4 */
@media screen and (min-width:0\-) {
body {
background: yellow;
}
}
/* New Android */
/* iOS (iOS Safari 3.2+), Android (Base browser 2.1+ & Chrome 22+, Opera Mobile 10+) */
@media screen and (-webkit-min-device-pixel-ratio:1.1) {
body {
background: red;
}
}
old goes to new for best results anyway
It's already in that order...
ah sorry i was looking at your version 2 page source (hadnt closed that tab)
what that may mean is that your old droid is hi-def (not too amazingly old)
...assuming the order is correct (i have to really look at it later when i am not at work)
Bah! Yes, you're right it is retina. Hadn't noticed! :-( As I say - muddled! :-)
the device pixels are based on hardware, the zero-slash-(whatever) hacks are based on the browser not the device itself, so some early hi-def devices will have older browsers on them (so they would respond to both)
Hi, I think I've found a variation of the following hack that doesn't affect IE:
Original:
@media screen and (min-width:0\0) {}
(Internet Explorer ≥ 9, Safari 4, Android ≥ 2.3)Variant:
@media screen and (min-width:0\-) {}
Replace second
0
with another character. I've used-
here but I've tried it with some letters and it works the same.I've tested this on an Android v2.3.7, browser version 4 and any properties inside the MQ are applied, but are not applied in everything else that's been tested*. Update: they're also applied to Safari 4.
*Tested on:
I can test iOS7 later and will update this post.
I'm basically chalking this up as 'apply stuff only to old Android' so I thought it might be useful to others.
Cheers