Home > Developer > JavaScript
Solve the problem of the scroll bar on the right due to the scaling of ie browser in high resolution, ie Scaling
0 Problem Description
To demonstrate touch operations, SurfacePro is purchased. The recommended resolution of SurfacePro is 2736 × 1824, and the default zoom ratio is 200%. The default zoom ratio of IE is also 200%, this results in a vertical scroll bar on the right. The height of the interface is calculated and controlled. This vertical scroll bar should not appear.
Normal
Scroll bar
1. troubleshootingSimplified from traditional to Rapid Positioning
In order to eliminate interface element interference, a clean page is directly created. In addition to referencing the CSS used on the original page, only one h1 tag containing the test text is left.
<!DOCTYPE html>When the scroll bar disappears, it can be determined that it is definitely caused by the bootstrap style. However, no answer was found for the specific reason. After checking F12 and checking the font, Margin, and other settings.
Half-lookup, filtering one by one
The issue file contains more than 7000 rows. We can directly Delete the css style at about the first 3500 positions. If the problem is solved, the problem lies in the style of the first 3500 rows. If the problem persists, it is certain that the problem lies in the style of the last 3500 rows, and then delete or annotate the first 3500 rows of the last 1750 rows to further locate the problem. There is a style like this in the 6800 rows:
@-ms-viewport { width: device-width;}Comment out and solve the problem.
2 Viewport and device-widthNow that the problem has been found, it is inevitable to find out what Viewport and device-width are, what is the use, and why it causes this problem. The following are the explanations on the network.
ViewportView port, which is the size of the visible area.
window.innerWidthAndwindow.innerHeight.The html element, that is, the document width, comes from the viewport width. The width of the scroll bar must be added on the PC side to be the same as the width of the viewport. Therefore, the document width comes from the viewport width.
On the Mobile End, the situation will become complicated.window.innerWidth.First, the width of the document mentioned above comes from the width of the viewport. We call this viewport layout viewport because it is related to the layout. On the mobile phone, the screen of the mobile phone is very small. When the iphone was released, a 980px value was set for layout viewport to display the complete desktop webpage. On the mobile phone, you can use
document.documentElement.clientWidthTo obtain it. My test on Android phone is also 980px.However, when the webpage is displayed in this way, the fonts and elements of the webpage are very small. to open such a webpage, the first thing to do is to enlarge the page. To improve readability, Apple allows the meta tag to set the width of layout viewport, that is, the line of code starting with the article.
But what is device-width?The resolution of the first generation iphone is 320*480, and the screen size is 3.5. When layout viewport is set to the same width as the browser (while the browser width on the mobile phone is the same as the screen width on the mobile phone), you do not need to open the webpage to zoom in every time, and the display font is similar to that on the desktop, good readability. Therefore, a device-width is defined, that is, the screen resolution of the mobile phone. It is also appropriate to translate the device into a "device.
However, when the second-generation iphone is released, the screen resolution is changed to 480*960, while the screen size is still 3.5. If the device-width is still the screen resolution width of the phone, the font size is much smaller than that of the first generation. Therefore, maintaining the value of device-width will be a good choice and compatible with the previous one. Therefore, the device-width value on the iphone is always 320, but the device indicates that "device" is no longer appropriate. In fact, it indicates a middle layer. Android also adopts this concept. Its device-width value is more than 360, and 360 = 540/1. 5,360 = 720/2.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
