superheroic, Scale to fit width is for the design overall.
Main W (px) |
Variant W (px) |
Break point (px) |
Explanation |
960 |
480 |
720 |
If a mobile can render 480px across, its height is going to be much larger than 720px so Main kicks in. Few devices are as blocky as 4:3. |
1280 |
480 |
880 |
Just above the Golden Ratio of 780px - a playing card. |
1440 |
480 |
960 |
For a device 16:9, the break point is close to 850px. |
1920 |
720 |
1320 |
My usual starting point is just right for 16:9 devices. |
A width of 960px for a Main website on a desktop would appear tiny in a full width browser.
My browser zoom would be around 270%.
A Scale to fit width of 1280px would limit the zooming to 190%, less than double, so not overwhelming.
This does not overcome the Break point being at 720px so you would have the same, current issue.
I would propose increasing your Main to 1280/1440px if you feel 480px is OK for the Variant.
I would, however up the Variant to 640/720px and use Scale to fit width.
If the device truly can only work with 480px then the scaling down is 75%/66.67%. This allows the font size to be upped by 33.3%/50%, improving readability on most devices.
With scale to fit width, the pop-ups match what is presented in the page so they should neve swap the layout.
Another variant is overkill, I agree, but is is still an option if you cannot tune your site to match your expected viewing need.
Acorn
Bookmarks