testing with various mobile phone modes in Google browser is successful
< 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
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
.< H1 > problem description < H1 > while writing transition animation, I inadvertently found that sometimes the page would jam, and the Chrome memory of the viewing task manager suddenly soared. After various exclusions, I found that transform:skew (9...
dynamic effects that are often overlooked are so important to user experience design Animation effect is an unavoidable link in user experience design, while in mobile interaction, dynamic effect exists as a transition lubricant and an important lin...
1. First of all, I have declared my font 2. 3. . 4. However, the above problems only occur in chrome and Firefox, where special fonts are successfully rendered on Safari . ...
sometimes normal and sometimes abnormal, use document.body.scrollTop = document.body.scrollHeight;; on the contrary, input will not be pushed up. Can you give me some advice? Thank you when the keyboard pops up, there is a value in document.body....
recently encountered a problem, in the cat s eye movie official website to see the normal display of numbers on the page, but to check the source code is a white box, can anyone solve the problem? screenshots of some cat s eye movie pages: ...
table component of elementUI used after adding a piece of data, if you have a scroll bar, you need to scroll to the corresponding position and highlight ...
there is a demand for the product, and there is no good solution after thinking about it, so I turn to you for help. no, no, no. the requirement is like this: an element (width and height is not fixed, defined according to browser width and height) cont...
A novice at the front end, who knows about html and css for about a month and a half, wants to ask the gods to take a look at it. There is such a page as the first screen, text plus pictures, the first half of the text is fixed, the second half is t...
<div> <p id=1> <p id=2> <p id=3> < div> p1 <div> <p id=2> <p id=3> <p id=4> < div> how to implement DIV can only display 3 pieces of data, and the new data will top up the previous data, simil...
first of all, IE9 does not support the placeholder attribute; placeholder under IE10 and Edge cannot set color and size; but after reading the registration of Xiaomi s official website, it is OK to ask how to achieve placeholder compatibility abo...
use javascript to imitate the sticky drag-and-drop effect of qq unread messages ...
when the width of the content in body exceeds the width of body due to the setting of left,margin thank you, and the width of body is not as wide as the width of the content, how to make the width of body equal to the width of the complete content? ...
ask a question about css breaking the table on this node? Thank you as shown in the picture. I erased the text, formatted it and stretched it out. As follows: http: www.yiyuanzhaopin.com . http: www.yiyuanzhaopin.com . above is the source cod...
question 1. For the layout of the following picture, first of all, the picture is uploaded by the user and needs to be displayed in a square. In the face of the variable proportion of the picture uploaded by the user, how will it be perfectly displayed ...
I want to be able to generate a small sound effect such as jquery after sending a unit. I wonder if there is any relevant way or example that can achieve this function? " I want to be able to produce a small sound effect. I want to be able to produc...
similar effect: question: the width of the parent element adapts to the width of the browser window, so how are the child elements evenly distributed horizontally (including the left and right margins)? requires compatibility with ie8 regardless of...
the page is segmented and typeset like word. Each page has a fixed width and height of 990 * 1400, which needs to be truncated and inserted into the header and footer. there are places where pages may be truncated: 1. 2. table 3. ul the realiza...
var imgs = $("-sharppictureQueryTable img").prevObject[0].images; the following figure is the printed result of the above sentence: console.loglength0dom console.log($( "-sharppictureQueryTable img ")) : : { title : "&...
separate structure from style Independent structure and style (skin) rules (Separate structure and skin) .metadata{font-size:1.2em; text-align:left; margin:10px 0;} .metadata{ font-size:1.2em; margin:10px 0; ** width...
App shares the content displayed by Wechat QQ, etc.; do you want to rewrite a page according to the layout on App? (App is developed natively by outsourcing companies) figure 1 below is the App interface, and after it is opened by Wechat, it is show...