Existing desktop Web projects need to be used for large-screen display, and may encounter the problem of unclear display caused by large resolution. The following are the solutions and choices.

Screen display

Plan 1: Scale

Train of thought

The body width should be 1920, so the web content will be rendered in a container with a width of 1920. And then scale it up to the entire screen.

Compute the zoom value based on the browser window size (such as innerWidth 3840), starting at the top left corner.

width: 1920px;
transform: scale(2);
transform-origin: left top;
Copy the code

Benefits:

simple

Question:

  • The chart library is implemented on canvas with fixed pixel values. Magnified distortion, Mosaic effect. It’s a hassle to avoid. For example, before rendering the chart, we can dynamically enlarge the height and width by obtaining the height and width of the container and then use the style to reduce the height and width.
  • Common UI libraries such aselementUI, pop-ups and other components use absolute positioning with body as the parent element, in px, and will be missing because of the body scale. Some interactions in the project code are also abnormal, such as mouse hover.

Conclusion:

This solution is not suitable for pages that require interaction or are implemented on canvas.

Plan two: REM

Train of thought

  • Screens smaller than a certain width (e.g. 2500px) base 10px (easy to calculate), larger than this width, based on the browser window width compared to 1920 screen base 20px, such as 3840 screen base 20px.
  • All units cannot appearpx
  • Font, line height userem
  • Width is best using Flex ratio, percentage, if usedrem, need to consider display no processing.

For charts:

Dynamically pass in the scale value, base size, line chart width, legend size, and so on multiplied to the final value

Benefits: Simple logic. Adapt to a variety of screens, community universal adaptation solutions

Problem: For existing projects, the PX value needs to be replaced globally.

Workaround: Use a third-party library and replace all styles with REM when packaging. No code changes are required for non-chart parts.

Try not to write style in style, not only ugly (affect readability), but also cause packaging tools may not be recognized and unified processing.

Pay attention to

Other styles are best set on body, not HTML. Set the style in REM on HTML, and Safari will use the browser default

Font-size base = 10

html {
	min-height: 90rem;
}
Copy the code

Safari’s default base is 16px, and the actual minimum height of a web page is 16 by 90 instead of 10 by 90.