Body has been set width: 100%;

CodePudding user response:

Are you set up the phone model, F12 click the phone icon in the upper left corner will be back

CodePudding user response:

1. May be margin
HTML, body {margin: 0; Pading: 0; }
2. The body are the outer container? Turn it into a width: 100%

CodePudding user response:

Web adaptive problem of the phone's screen, general considerations:
1. On the web & lt; Head> Add the following code to the width of the web page automatically adapt to the width of the phone's screen
<meta name="viewport" content="width=device - width, initial - scale=1.0, the minimum - scale=1.0, the maximum - scale=1.0, user - scalable=no"/& gt;
2. Do not use the absolute width: as the web page will adjust the layout according to the screen width, so can't use the layout of the absolute width, also cannot use have elements of absolute width, height set percentage is invalid,
3. Can't use absolute font size (px), and can only use relative size (em/rem),
4. The flow (fluid grid layout) : such as CSS to add

. The main {
float: right;
Width: 70%;
}

. LeftBar {
float: left;
Width: 25%;
}

CodePudding user response:

Into your mobile phone mode, click the F12, and then switch the top left-hand corner has a mobile phone and computer, have to do is click

CodePudding user response:

View mode is not quite right, should be the icon above the phone tablet are removed

CodePudding user response:

In addition to width
Try to add the position: absolute

CodePudding user response:

Your body didn't give wide 100%

CodePudding user response:

Switching mode

CodePudding user response:

Width: 100 vh; Keep the full screen