Compatibility issues in front-end page display

testing with various mobile phone modes in Google browser is successful

clipboard.png

< meta name= "viewport" content= "width=750,user-scalable=no,target-densitydpi=device-dpi" >

but when the project was uploaded to the network and tested with a real machine, I found that the background picture there was only less than half of it, and it was unable to slide down, and the code used to deal with the adaptation was also added

.

how to modify it to see the same effect on the mobile phone

Jul.29,2021

this seems to be a problem with the height of mobile phones


Don't use chrome's device mode to adjust it, because generally few users in China install chrome on their phones and happen to be the main browser, so you can't tune it blindly for chrome.
I adjust the mobile terminal myself. I usually open a Live Server, on my computer. If there is a ready-made project (such as vue or react), I use the editor plug-in (VSCode) if it is not in the project. If not, you can install a phpStudy and open a Nginx ~ turn on the service computer ip+path, to find a QR code generator (browser plug-ins are generally available) to make a code, and the phone can be scanned locally.
back to the question. Target-densitydpi I remember that there is a problem with compatibility, and there is less actual use (or maybe I haven't seen much.); width is usually equal to device-width, and then use more relative units such as vw and vh, which may be easier than width writing.


you can try the real machine test with weinre. If you don't know how to use it, you can read it in my article, where there are steps

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7c3d1c-2cfe5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-7c3d1c-2cfe5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?