Move end priority is not reduced page: 390 px"Touching and Chinese for physical exercise."

Moving end priority is reordering, not narrowing overall

By scaling down the desktop page, the usual result is that the word is smaller, but the information is still too much: five navigational entrances are squeezed into two rows, three columns have only a few words in each column, and the right-hand action button covers the text. The mobile end design first determines what is most important on the narrow screen, what can fold and what must be changed to another component. I'm usually from 390.px Width starts, check 320.px.390 px It's a common cell phone reading space. 320.px . Do not drag a browser to the size of a mobile phone that looks like a real view and touch control simulation.

Let's find out what the real source of the lateral spill is.

Don't give it to me right away when the page moves right and left. body Add overflow-x: hidden. Hide only allows the excess to be invisible. Use the development tool to check the layers. scrollWidth greater than clientWidth , common sources include fixed pixel width,min-width Tables, no line breaks URL, pre Code blocks, absolute positioning buttons and too large an inner margin. The temporary contouring of all elements allows for quick positioning:

* { outline: 1px solid rgba(255, 0, 0, .15); }

Remove debugging style after positioning. Body packaging settings max-width: 100%, picture used height: auto; codes and tables that do require complete columns are placed in separate horizontal scrolling containers instead of allowing the page to scroll.

The Chinese title should allow for a natural break, but not a single word.

Chinese does not only dispose of words in spaces, as it does in English, so too large a word and too narrow a capacitor can easily leave a word in the last line. Move the font number down and line height, then the text can be expanded. Do not set the headlines high, or insert them in the text for the sake of forcing both lines. br; changing the title to a single word will expire. Long English product name, mailbox and URL Available overflow-wrap: anywhere As a cover, but the Chinese text does not recommend global use word-break: break-all, which separates the English word from any character. The title should be tested in three samples: Chinese, English and Chinese.

On the cell phone, the form decides whether to compare or to check the records.

Two or three columns of the comparison table allow for the retention of the table and horizontal scrolling, with the first column fixed if necessary; seven or eight rows of the back-office logs are more suitable for grouping on a cell phone, with each record arranged by the word " field name: value " . Force the eight columns into the screen will cause the date, classification and status to be overwritten, and the user cannot even see the full text. The back-office desktop table should also have priority: titles and operating guarantees are readable, secondary indicators allow for the omission of numbers and provide suspensions or details, and dates are prohibited from overlap with adjacent columns.min-width It should come from content needs, not from a total width written on hand.

Touch-and-spacing targets and spacing are not allowed to copy the mouse's perimeter perimeter.

If only 20 icon buttons on the phone px, the visual accuracy of the finger is difficult to determine. Expand the clickable area, leaving space between buttons; do not separate the color status alone, or hide the key operation in a menu that can only be suspended. Keyboard focus, screen reader name should be consistent with visible text. Use the appropriate form input box input type, the error hint is tight to the field and the focus is brought to the first error after submission. Do not click on the input box because the font is less than 16 px It is automatically magnified by the browser, which causes the layout to jump suddenly.

A copy of the actual acceptance order

1. At 320.px, 390 px, 768 px Opens the width of the desktop separately.
2. Slides through the top of the page to confirm that the page itself is not rolling horizontally.
3. Maximum Title Test, Maximum URL, the most wide tables and the most buttons are real data.
4. Only the keyboard is used to complete the navigation and forms, and to see if the focus is visible.
5. Widen the system ' s numbering to confirm that the content is not fixed to a high degree.
6. Loads under the weak net to confirm that the picture is not intended to cause the button to jump.

Moving end through does not mean that desktop end can be ignored. Finally, go back to the big screen to check text width and white, and avoid having desktop contents full for a cell phone. The next entry continues to handle the two most heavy types of resources in the first screen load:Website Pictures and Font Optimisation.