Comments on: iPhone 4 and iOS 4 Safari detection & behavior

By: userAgent | just study

userAgent | just study — Sat, 04 Dec 2010 11:47:54 +0000

[...] Bots vs Browsers – Public Bots and User Agents Database and Commentary Whats My User Agent? iPhone 4 and iOS 4 Safari detection & behavior with CSS media queries, viewport and JavaScript t… This entry was posted in javascript, php. Bookmark the [...]

By: Justin

Justin — Thu, 26 Aug 2010 02:37:10 +0000

function init() {
var winW, winH;

if (window.devicePixelRatio)
setWidth(window.devicePixelRatio);

if (parseInt(navigator.appVersion) > 3) {
if (navigator.appName == “Netscape”) {
winW = window.innerWidth;
winH = window.innerHeight;
}
if (navigator.appName.indexOf(“Microsoft”) != -1) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
}

document.getElementById(“size”).innerHTML=”" + winW + “x” + winH + “”;
if(window.devicePixelRatio)
document.getElementById(“ratio”).innerHTML=”Pixel Ratio: ” + window.devicePixelRatio + “”;
}

function setWidth(ratio) {
var winW
if (parseInt(navigator.appVersion) > 3) {
if (navigator.appName == “Netscape”)
winW = window.innerWidth;
if (navigator.appName.indexOf(“Microsoft”) != -1)
winW = document.body.offsetWidth;
}
winW = winW * ratio;
var m = document.getElementById(“vp”);
m.attributes[2].value = “width=” + winW + “, initial-scale=” + (1 / ratio) + “, maximum-scale=” + (1 / ratio) + “”;
}

This works if in portrait mode when you startup. some additional code would make it work in landscape as well…

this will put the device into the mode to report actual pixel information, not the virtual pixel information.

By: Justin

Justin — Thu, 26 Aug 2010 00:44:52 +0000

I use this in javascript for detection:

var iPhone4 = false;
if(window.devicePixelRatio && window.devicePixelRatio == 2) { iPhone4 = true; }

I forget what site I found it on, but it might be useful to add here too.

By: Lalo

Lalo — Wed, 18 Aug 2010 15:07:27 +0000

Hi, I’m experiencing the same issues as Nick when using an Iphone 4. It just ignores the meta tags…

By: Nick Pavlak

Nick Pavlak — Mon, 16 Aug 2010 20:32:37 +0000

I also tried device-width with a min/max scale of 0.5 which does not work either.

By: Nick Pavlak

Nick Pavlak — Mon, 16 Aug 2010 20:30:38 +0000

Yeah I tried device-width as well, and to no avail. I even tried a variety of different things such as making the viewport intentionally too large. And while these changes all reflect in Safari, no matter what I do the webapp ignores the viewport meta tag all together, and just makes the image 960×640 no matter what.

By: firt

firt — Mon, 16 Aug 2010 19:52:40 +0000

Hi Nick, are you using width=device-width inside the viewport? Don’t use the real resolution inside the viewport

By: Nick Pavlak

Nick Pavlak — Mon, 16 Aug 2010 19:50:07 +0000

So here is my problem… This webapp is set up and looks great in the browser, and on older models of the iPhone. However with the iPhone 4 when made into a webapp, it defaults to full resolution which makes it impossible to view on the phone. I’ve tried just about every solution I could find, and still nothing works.

Why is it ignoring the viewport command in webapp mode? Is there any way to make it recognize the viewport?

By: Zoe Gillenwater

Zoe Gillenwater — Mon, 19 Jul 2010 13:09:29 +0000

@Taylor Durham
I have run into this in the past too, Taylor. IIRC, the way to fix it is to change your meta viewport tag from plain meta name=”viewport” content=”width=device-width” to meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″.

By: Ester Pokswinski

Ester Pokswinski — Wed, 14 Jul 2010 18:49:00 +0000

I really like what you write about here. I try and visit it every day so keep up the good writing!