前端页面显示的兼容性问题

Question

在谷歌浏览器中用各种手机模式测试都是成功的

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

但是当把项目上传到网络上的时候用真机测试的时候才发现评论那里的背景图片只显示了一半不到，而且还无法下来滑动,用来处理自适应的代码也加了

要怎么修改一下才能在手机端也看到一样的效果啊

Answer 1

这个好像是手机高度的问题吧

Answer 2

别用chrome的device模式去调啊，因为国内一般很少有用户手机上装了chrome而刚好又是主力浏览器的，所以你面向chrome调不白瞎了么……
我自己调移动端，一般都是在电脑上开个Live Server，如果项目里有现成就用项目的（比如vue或者react）、项目里没有就用编辑器插件（VSCode）。再不济，还可以装个phpStudy开个Nginx嘛~开了服务电脑ip+path，找个二维码生成器（浏览器插件一般都有）做个码出来，手机扫下就能本地联调了。
说回问题。target-densitydpi我印象里兼容性是有问题的，实际用的比较少（也可能我没怎么见过吧）；width一般用的时候都是等于device-width，然后多用vw、vh这些相对单位，可能会比宽度写死还更简单些。

Answer 3

真机测试可以用weinre去试试，不会用的话可以去我文章中看下，那里有步骤