Scale to fit
Scale contents to fit
Scaling allows your page to fit to the available space in the browser.
With scaling you can scale the page to fit the width of the browser, the height of the browser or both.
In Euclidean geometry, uniform scaling (or isotropic scaling[1]) is a linear transformation that enlarges (increases) or shrinks (diminishes) objects by a scale factor that is the same in all directions. The result of uniform scaling is similar (in the geometric sense) to the original.Uniform scaling happens, for example, when enlarging or reducing a photograph, or when creating a scale model of a building, car, airplane, etc. Wikipedia
Scaling demonstration video
Scaling can be done when the page loads, when the browser is resized, or scaled on double click and more.
Scaling can make the page unreadable. Use the
--web-minimum-scale CSS property to on your page if you want to define a minimum scale. 1 is 100%, 2 is 200%, .5 is half size.--web-minimum-scale: .8Use the horizontal and vertical positions to position the artboard.
The scale options provide options
Scale - The scale value is a number that enlarges (increases) or shrinks (diminishes) objects, in this case the artboard, by a scale factor that is the same in all directions. A scale value of 1 is normal size. A scale value of 2 is twice as large. A scale value of .5 is half the original size.
- Default scale - the page (the artboard) is not scaled. It is shown at actual size. The view is at 100%. If it is larger than the size of the browser window scroll bars appear.
- Scale to fit - The page is scaled down to fit the available width or height of the browser.
- Scale to width - The page is scaled down to fit the available width. If the page is really tall vertical scroll bars appear so you can scroll the page up or down.
- Scale to height - The page is scaled down to fit the available height. If the page is really wide horizontal scroll bars will appear so you can scroll left or right.
- Scale on resize - If you resize the browser the page is scaled. With this option turned off the page is scaled once when the page loads.
Reset scale on double click - With this option enabled you can double click on a scaled page (a page that is not actual size) and it will be shown at actual size. For example, if you have a large page that is scaled down and then double click on the page it will be shown at full size with scroll bars.
Scale on double click - With this option enabled if the page is at actual size and you double click on it will be scaled.
Show scale slider - This shows a horizontal slider on the page that you can use to scale the page up or down
Enable scale up - With this option enabled the page will scale up to fit any available space. So if you have a large screen the page may appear larger than the size it was designed at.
Minimum Scale - This is the minimum scale amount. Currently you must set this in CSS defining a numeric value for "
--web-minimum-scale”. Center horizontally - The page is centered horizontally when there is space on the left or right of the page. (optional) (related)
Center vertically - The page is centered vertically when there is space above or below the page. (optional) (related)
To Scale to Fit
To use Scale to Fit open the Export Artboards dialog. In the Scale options group select the options you want to use.
Usually this will be Scale to fit or Scale to Width and then Scale on resize and Enable scale up.
You will probably like to have Center Horizontally and Center Vertically checked as well.
If page doesn’t scale at all check a few things.
- Check to make sure JavaScript is enabled in your browser
- Open web inspector tools and check for any messages in the console (CMD+ALT+I)
- Be sure to load the stylesheet before the application script
- When loading from a file:// path it may not run unless you place the stylesheet inline. In other words if the stylesheet is a separate file linked in it may not run.
To fix the issues (try each of the steps in order):
- Turn off external stylesheet (while testing)
- Test in a different browser (test in Firefox or Brave)
- Load the page from localhost
- Load the page from your main server
- If you still get errors on your main server you may need to add a content security policy
Last modified 3yr ago