How to browse mobile web pages on your computer

background

With the increasing popularity of mobile phones , There are more and more things for mobile phone development , It even started to support only mobile phones . For example, one of our landing pages , it Mobile phones are preferred Input clues , Very unfriendly to computers . This is the time to deal with , The realization of using the computer to access the mobile phone web page as if it were a mobile phone

resolvent

In fact, the computer can directly simulate the mobile terminal

Preparation tools

Required materials

• The website you want to visit Url
  • Suppose this time it is https://cn.bing.com/
• Google Chrome browser
• A computer (Mac perhaps PC)

operation

1 visit Url

Turn on the computer Chrome browser , visit https://cn.bing.com/

2 Open browser developer tools

Dot >> More tools >> Developer tools

3 Switch phone mode

The top left corner of the pop-up menu Next to the mouse style There's a cell phone / Computer style switch button

Point him Then press F5 Or click refresh page

Then you will find that you have entered the mobile mode page

You can also adjust the model Pixels Horizontal and vertical screens, etc
This is the time , Pages specially adapted to the mobile phone , You can operate on the computer

summary

The principle of computer and mobile access is the same

Both the computer and the mobile phone send requests to the server , Just like you wear different clothes , Maybe they wear short sleeves in summer , Down jacket in winter , But whatever you wear , You have to go out to work . Maybe you took the subway last time , Take the bus this time , Next time, prepare to drip , But you still have to go to work . It's just a matter of form

At the bottom of the request , You find it's just User-agent Changed , The others are the same

• When you use a computer to access Url When , You'll find that Request Headers Of User-agent yes

user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36

Because I use Mac Computer Chrome Access to the

• When you switch to mobile access Url When , You'll find that User-agent yes

user-agent: Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1

This means that the browser simulates iPhone visit

Ran goose , The other parameters are still exactly the same , It's just that the server is right Headers Medium User-agent Made a judgment , Or in javascript Function in navigator.userAgent Made a judgment , To know that the accessed device is a mobile device , Or computers