No proper viewport scaling when using breakpoints for responsive design?

[pumadog]

Am I right that Muse can't produce responsive pages with breakpoints that scale to fit on different smartphones? I have to use separate phone pages to enjoy viewport scaling?

This Muse Jam: Responsive Power Tips and Tricks - YouTube  sounds like it worked while my tests and the forums say it doesn't!?

[ankushr40215001]

Hello,

It's best to set your breakpoints to the most commonly used viewport sizes, eg 320px, 480px for phone and further.

That way you don't have to guess what's going to happen.

There's a nice tutorial on this subject that also lists these sizes with percentages that these are used.

Do check it this out and let me know if it helps - NEW! Adobe Muse 2016 Responsive Tutorial | Where to Put Your Breakpoints - YouTube .

Regards,

Ankush

[pumadog]

So your answer is no? If I want a "frameless" design on different phones I would need many breakpoints between 320 and 480px…

[Günter Heißenbüttel]

Muse uses breakpoints and fluid scaling down to the smallest breakpoint.

If your phone display is less wide than your smallest breakpoint, it uses viewport scaling.

[pumadog]

No, it runs wider than the phone screen! If it's not intended to do so, I don't know why it does? A little test: Homepage (designed with 20px around the box)

[Günter Heißenbüttel]

Please, upload the .muse file of your sample page to Dropbox or a similar service and post the download link here, so we can have a look.

(You may attach your .muse file to a hyperlinked object of the sample site as well.)

[pumadog]

Here it is: Dropbox - Viewports-Breakpoints.muse

[Günter Heißenbüttel]

Did you have a look at your file in "real world"?

Homepage

It is working well here on computer, iPhone 6, iPad, iPad mini.

iPhone 5 will be tested this evening.

[pumadog]

Yes, I did. Also your testpage doesn't scale to fit on my iPhone 6/iOS 10 or here: Troy - Responsive web tester

[Günter Heißenbüttel]

Could you be a little(!) bit(!) more(!) precise? Doesn’t scale to fit? How? You wanted a border, didn’t you?

Please tell exactly in simple words what you want to achieve.

I definitely don’t use those simulators like troy.

[pumadog]

Okay. This test page has a border of 20px around the coloured box. Page width in the smallest breakpoint is 320px. So, with viewport scaling I expect the borders at top and sides to be equal – no matter which phone I use.

When I view it on iPhone 5 it has borders of 20px. Alright! It is displayed with 100% on a 320px display.

When I view it on iPhone 6 is has wider borders at the sides! Ugh! The display is 375px wide. So it appears as displayed with 100% as well – not scaled!

I just want it getting viewport scaled without going for a separate phone layout. Possible or not?

Thanks for your effort!

[Günter Heißenbüttel]

I updated the sample site: http://viewport-test.businesscatalyst.com

That is, what I understand you are looking for.  If not …

[pumadog]

I guess you set it to flexible width? Unfortunately that's no solution for my wanted layout. But thanks!

[Pavel_Homeriki · Accepted solution]

I understand what you mean. Unfortunately, we must recognize the fact that scaling does not work properly for mobile devices, when using a fixed breakpoint. I think this is not a problem Muse, but the problem of mobile browsers. Widespread global practice - the use of fluid breakpoints for mobile devices.

For example: 1200 fix, 1024 fix, 960 fix, 768 fluid, 320 min W. Adobe jam sessions very far from the actual practice of creating websites. Pay attention to the bootstrap layouts and then much will become is understandable.