I just realized that sites done in Webflow doesn’t display properly on iPhone 5 devices. I don’t know if this is the same for all iPhone devices since I have only 5 and 5C to check, but once I’ll get to 3GS my friend have Ill check on that too.
The issue is that sites done in webflow when opened on iPhone 5 they are 460x320px portrait and 156x320 landscape!!! I just checked on my private server (http://bartekkustra.eu/dupa.html) that browser opens with 1409x980px portrait and 553x980px landscape. It seems that Webflow have some issues with iPhone browsers. I checked both Safari and Chrome on my iPhone. I think this is something you should work on quickly.
Hey Bartek, are you sure you’re doing your calculations correctly? You may be calculating pixel dimensions without considering pixel density. I just opened your site on an iPhone 4 and it registered 980 x 1091.
Can you tell us which specific sites aren’t displaying correctly? We want to make sure that all Webflow sites look awesome on all devices.
I’ve used alert('height: ' + $(window).height() + 'width: ' + $(window).width()); and it shows as it’s on images below. width is important here… Safari portrait
Thanks for the first fix. The view loads correctly for landscape version. Unfortunatelly the fix didn’t work as it should… I get 320px width on portrait and 568px width on landscape… It should be 640px on portrait and 1136px on landscape. It seem like it’s decreased the size twice somehow… Double checked on both Safari and Chrome on iPhone 5 and 5C.
@bartekkustra This is because we’re using a viewport meta tag to ensure that the content scales to fit the mobile device width. If you dig into our published HTML you’ll see this tag:
This tells the browser to scale the inner content to fit the device viewport. In the case of the iPhone portrait, we get “320px” because that’s the virtual pixel width of the viewport.
Well… The browser width should be 640 in portrait and it is on every other site I’m using… Will there be any chance of changing this stuff to the proper one? What should be the width= and initial-scale= to not downsize the browser on iPhone?
If you’re developing other responsive websites for mobile devices, you really should be using a viewport meta tag. Although not yet in the HTML spec, most popular mobile browsers support it, and using a viewport tag ensures more predictable layouts (especially in iOS).
