largest mobile size I can go

[behzad]

In the past I have done 700px for mobile size. What is the largest size I can go? I am finding that with my current project 480 is way too small to fit
everything. BTW the desktop is 1130 px

Ideas will be appreciated plus any samples url that you have.

Thanks.

[Acorn]

If you have Main at 1130px, you could have a Variant at 1030px and the cross-over would be at 1080px.
Clearly that is not sensible.

So what you try to do is use Scale to Fit Width (STFW) with a Maximum limit and pick a compromise Variant size.
It is a compromise as make it too wide and a 480px view will appear too small.
Make it too big and the cross-over point will appear too large.

Imagine a 1200px web site with STFW Maximum of 1600px.
At 1200px browser width, Main iis 100% scaled.
Open out to 1,600 and it is now scaled by 125%.

Throw in a Variant of 600px width.

The cross-over is 900px, so Main would appear as 75% scaling.
At 899px, the Variant kicks in and will be 133% scaled.
At 600px, it is 100%.
at 480px, it is 80% scaled.

It is up to you to design the pages to fit the range of scales that each might encounter.

I usually pick Main's width, M, first.
I then half that for a single Variant (M/2).
Crossover is 3M/4.
Max is 5M/4.
The smallest Variant width of 480px is a scaling of 9.6/M%.

So for 1440px Main, a 480px variant is showing at two thirds scaling, so i know my Variant's font size should be 50% larger.
I, however, usually consider 640px is be the smallest that I need design for.

Acorn

[behzad]

Thank you.

[Boy]

Thanks for the clear explanation, Acorn!

[bwood]

I have two variants and they work well together. A 1000px variant, and the phone variant is 720px. This combo is great for desktop, laptop, tablet in landscape, and phone in portrait. Just have the two variants.

[behzad]

Thanks Bwood