I looked out of the window before I left home in the morning. It was a little cloudy, not raining, and that probably set off what was going to happen today. But I hummed a tune and rode my scooter to the subway. Arrived the company saw a while technical article, at this time flank jun elder brother sent out a few ah? Huh? What's going on? I wonder what's going on here? Then Junge put an OPPO phone in front of me and the following screen appeared:Copy the code
I was shocked why there were so many lines, and they were very regular, but the normal page was not displayed.
Jun brother told me seriously that this page is not required, but the interface return normal, and the normal page request return is no different. Then I asked Jun elder brother to the address of this page, put on the browser desperately brush, brush out the error page. The result is that this error does not occur on the PC, but only on the mobile. When debugging on PC, there will be no error and the interface returns to normal, which increases the difficulty of debugging in a disguised way. How to do? You can connect your Android phone to your computer and remotely debug native WebViews in Android using Chrome Developer Tools. How to do it? A debug tutorial written by a man named Yifeng, very detailed
After connecting to the mobile phone, open the PC debugging page as follows
The page of the commodity order in the figure above is the page with the problem. After debugging, how can I say, the page is very clean, exceptionally clean (as shown below).
Analyze the page, no error, resource load normal, interface return normal. Jun elder brother we look at each other, popular say is big eye stare small eye. How do you adjust this… The following is the wrong analysis process, which is completely unnecessary after the review
Change the HTML content to see if it can be displayed. After the change, it can be displayed, but add text to the outermost node.
Change the line color to take effect
Invalid to change list contents
Remove the style and see if there is a compilation error for Webpack, which the code does not
Snap snap alert, active
Summary: JS is ok, CSS is ok, webView problem? Inner play :(is the webview after the first rendering, add content will not change? No, js has been executed, alert has been played, and the added content can also be displayed.
Jun elder brother said: want to change the following table height to see?
Me: good!
Junge: How much should it be?
Me: Either way!
Junge: Then make it bigger!
Me: Ok, how much?
Jun elder brother: 1000
I: good, go you!
I think I didn’t say anything constructive, so I decided to say 1000px;
It went into effect! It worked!
Jun elder brother say: that I change REM try.
Me: good!
It’s the same as before. Rem does not work, and if you look at the elements in the debug, the style of each node is correct, that is, the height is 0. What’s going on? What’s going on?
I looked at the font size of the root element, as shown below:
There is a MMP in my heart, I do not know when to speak improperly.
As we all know, rem layout relies on the font size value of the HTML. Our code is dynamically set according to the width, and is written in the head tag at the beginning. But OPPO phones start loading webView with a value of 0 in clientWidth. There’s no solution. I’ll just get it back. As for the solution, it’s up to you to decide whether to set the default font size for a screen size of 0, or whether to request multiple times.
What I need to do is to replay the debug process to avoid similar problems in the future, it will take a long time to find the problem. It’s a bit of an afterthought.
PC side no problem, mobile side has a problem, then must try to find a way to debug in the mobile side, this time do not do useless work in the PC side, after all, the browser kernel is not the same.
Mobile terminal debugging method, remote debugging by linking data line (this is the key, can see whether the page error, determine whether the JS problem or CSS problem)
Console has no error, not JS problem.
Resource download normal, not server problem.
The interface returns to normal. This is not a background interface problem.
If you can see lines, it’s a style problem.
If the CSS line color can be changed, the compilation is ok.
The lines squashed together indicate no height.
Look at the HTML nodes are normal, the picture is also normal download, why no height? The height is also written.
Change element height, REM,px
Px works, REM doesn’t. Font size problem for the root element
Font-size depends on the width of the page.
Sure enough, the page began to play 0, and then play 360
A solution to solve the test on-line.
conclusion
The result of solving a bug is not important, but the idea of solving a bug is important.Copy the code
