使用Foundation的单页应用视口移动版

Question

I am using Foundation for a responsive website and have a problem with SOME mobile devices not properly scaling the viewport ONLY when you load another page via our ng-include. This loads new content into the page and the width of the page then breaks and requires horizontal scrolling.

This doesn't happen in certain devices such as Galaxy Note 3/4, but does happen in devices with identical resolutions, such as iPhone 6 Plus. I do have a viewport attribute and scaling set:

<meta name="viewport" content="width=device-width, initial-scale=1, target-densityDpi=device-dpi;">

Any help figuring out why this doesn't scale properly when I load new dynamic content for this single page application is greatly appreciated. I'm not sure if it's related (just thought of it), but we also use document equalizer reflow often:

$(document).foundation('equalizer','reflow');

Answer 1

I needed to add a min and max scale. Although I didn't test it, I imagine I just needed to add a max scale, as the content was flowing off the screen.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">