May 30, 2021 Article blog
Tips: Debugging your iPad or iPhone starts debugging mode in settings and online debugging when developer mode is turned on like the Safari browser in your Mac. I t's tough. W hen you recently made a page, you find that the background is incomplete in the iPad's Safari browser, and when you locate the div, you find that the specified css is 100% wide; Y ou can acquiesce in initializing the viewport width or setting min-width in css, but the easiest way is to initialize the viewport in the head tag.
See the code below: <meta name," "viewport," content, "width, page true width, initial-scale, multiple values"/>
Assuming a page width of 960px or 1080px, you can add the value to the width and set the initial-scale to an appropriate multiple.
For example, if a page has a width of 1080px, it is set to: <meta name," "viewport" content, "width, 1080, initial-scale, 0.9"/> so that it can be displayed friendlyly whether you switch between horizontal and vertical screens before and after loading.
However, for example, the head part is set to width: 100%, while the maximum width in the middle of the page is acquiesced: 1200px, the head and the middle length are not consistent. T his problem is caused by inconsistencies between the acquiesced pixels on the pc side and on the phone. Should it be resolved?
Add the above sentence to the <head > of the page so that the width of the page automatically adapts to the width of your phone's screen:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
width-device-width: indicates that the width is the width of the equipment screen
initial-scale=1.0: Represents the initial scale
minimum-scale=0.5: represents the smallest scale
maximum-scale=2.0: represents the largest scale
user-scalable-yes: indicates whether the user can adjust the scale
Set up the full screen of the iPhone page.
The cancellation number is recognized as a phone number.
If you want to open a Web page, it will automatically appear at the original scale and will not allow the user to modify it:
<meta name="viewport" content="width=device-width(这里是可以变化的,根据你的其他div的宽度来设置), initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Once this look is written, it is possible to set the width of some header banners and other pictures to style "width: 100%", and all the pages look full-screen on their equipment. The problem is solved by replacing the device-width in the width-device-width with the pixel value set in your center, such as my setting of 1200px.