Streaming live at 10am (PST)

iPhone Browser issue


#1

Hey!

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.

~Bartek


#2

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.


#3

I've double checked. It's http://yourcontrolx.webflow.com.

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

Safari landscape

Chrome portrait

**Chrome landscape


To be sure that it's not browser issue I've made same code on http://bartekkustra.eu/dupa.html where it shows:
Safari portrait

Safari landscape

Chrome portrait

Chrome landscape


#4

@bartekkustra Thanks for the bug report! We've found the issue and pushed a fix. Now, the portrait and landscape widths should report differently.

-Dan


#5

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.


#6

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

<meta name="viewport" content="width=device-width, initial-scale=1">

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.

Hopefully that clears things up!

-Dan


#7

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?


#8

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).

We use the same viewport tag as HTML5 boilerplate.

For reference, check out this MDN article:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag


#9