H5开发
本话题发布H5开发相关的问答文章和技术分享，将持续更新，为您推荐了23篇问答，访问即可查看更多精彩内容。
-
1
回答
27浏览
为什么我的Vue页面在手机上布局会错乱？
我用 Vue 写了个简单的商品卡片，在电脑浏览器看是正常的，但一到手机上就文字重叠、图片变形，明明用了百分比和 max-width 啊……试过加 viewport meta 也没用。 这是我的组件代码...
-
1
回答
44浏览
H5页面在iOS Safari上为什么无法自动播放音频？
我做了一个H5活动页，需要进入页面就自动播放背景音乐，但在iPhone的Safari里死活播不了，安卓和PC浏览器都正常。查了说是iOS限制，但具体怎么绕过啊？ 我已经试过加muted属性然后用户点击...
-
1
回答
39浏览
H5在不同手机WebView里样式为啥不一样？
最近做了一个H5活动页，用的是flex布局，在iOS的Safari和微信里显示正常，但在安卓某些机型（比如华为、小米）的WebView里布局就乱了，元素错位或者高度不对。明明代码没动过，是不是WebV...
-
1
回答
104浏览
弹性布局中子元素宽度不按预期收缩怎么办？
我在做移动端商品列表，用 flex 布局让三个卡片平分一行，但内容多的卡片会撑开，导致其他卡片被压缩甚至换行。明明设了 flex: 1，为啥不均分？ 试过加 min-width: 0 也没用，布局在 ...
-
2
回答
62浏览
H5在手机上怎么调试console.log看不到？
我在做移动端H5页面，用console.log('test')打日志，在电脑浏览器里能看到，但用微信或Safari打开就完全没反应，根本不知道代码执行到哪了。 试过用vConsole，但引入后页面样式...
-
1
回答
27浏览
H5页面在iOS Safari上点击事件没反应怎么办？
我最近在开发一个移动端H5页面，用的是React。在安卓和桌面浏览器上都正常，但在iOS的Safari里，按钮点击完全没反应，连onClick都不触发，特别奇怪。 我试过加cursor:pointer...
-
2
回答
30浏览
Android WebView里H5调用JS方法为啥没反应？
我在做混合开发，H5页面嵌在Android的WebView里，想通过JSBridge调用原生方法，但点击按钮完全没反应。安卓那边说接口已经注入了，但我这边调用好像没触发。 我试过加try-catch也...
-
2
回答
56浏览
iPhone X底部安全区域适配不生效怎么办？
我在做移动端页面时，发现iPhone X及以后的机型底部被Home Indicator遮挡了内容。明明加了viewport-fit=cover，也用了env(safe-area-inset-botto...
-
1
回答
46浏览
刘海屏下页面内容被遮挡怎么解决？
我在做移动端页面时，发现iPhone的刘海屏会把顶部导航栏的内容挡住，试过加padding-top: env(safe-area-inset-top)但好像没生效，是不是还要配合其他设置？ 我的CSS...
-
2
回答
26浏览
响应式断点设置后，为什么在手机上还是显示桌面样式？
我用媒体查询设置了移动端的断点，但用手机访问时布局还是按桌面端渲染，试了几个不同设备都一样，是不是哪里写错了？ 下面是我写的 HTML 和内联的 CSS： <style> @media (...
-
2
回答
43浏览
横竖屏切换时布局错乱怎么解决？
我在做移动端页面，用的是 rem 布局，但一横屏整个页面就炸了，元素挤成一团。 试过用 orientationchange 监听事件重新设置根字体大小，但效果不稳定，有时候根本没触发。有没有更靠谱的适...
-
2
回答
55浏览
真机调试时页面显示空白，但开发工具里没问题？
在做H5页面真机调试时遇到个怪问题：手机连接同一局域网访问开发服务器，页面直接显示空白，但用Chrome开发者工具模拟移动端却能正常显示。我试过清除缓存、检查网络请求，console里也没报错，但手机...
-
2
回答
57浏览
H5页面通过USB连接Android设备调试时，为什么无法在Chrome DevTools看到实时更新？
我在开发移动端H5页面时，通过USB将Android手机连接到Mac电脑，按教程在Chrome开发者工具启用远程调试。但修改代码后页面没变化，即使刷新也看不到最新内容。尝试过清除浏览器缓存、重启adb...
-
1
回答
88浏览
React用vw/vh布局时滚动条出现页面错位怎么办？
我在做移动端页面时用了100vh设置容器高度，但页面出现滚动条后底部元素就被截断了，试过calc(100vh - env(safe-area-inset-bottom))也不管用，求大神指点 比如这个...
-
2
回答
28浏览
H5开发 – WiFi调试时手机无法访问本地服务器，可能是什么原因？
我用手机连接同一WiFi后，访问本地服务器的http://192.168.1.3:8080一直显示网络错误。试过用内网IP和手机自带的局域网扫描工具，返回的ERR_CONNECTION_TIMED_O...
-
2
回答
74浏览
aspect-ratio设置后图片在移动端显示变形怎么办？
我在做移动端卡片布局时用了aspect-ratio属性，但图片总是变形。比如这个卡片： .card-container { aspect-ratio: 16/9; position: relative...
-
2
回答
74浏览
使用amfe-flexible后页面元素在不同手机显示比例不一致怎么办？
我在项目里用了amfe-flexible，按照文档设置了meta name="viewport" content="width=device-width,initial-scale=1"然后引入imp...
-
2
回答
94浏览
流式布局中元素宽度百分比计算不准确怎么办？
我在用流式布局做自适应页面时遇到了问题，设置了父容器宽度为百分比，但子元素的百分比宽度在不同屏幕下计算总是错位。 比如这样写结构： 内容 内容 内容 在手机横屏时三列能撑满，但竖屏时会溢出容器。试过加...
-
2
回答
102浏览
为什么用rem方案后移动端页面在不同机型下字体和间距错乱？
最近在用rem方案做移动端适配，按教程设置了html根字体大小，但发现iPhone 12和华为nova9的字体和间距显示完全不一样，1rem在nova9上显得特别大。 我按教程写了个动态计算函数： f...
-
2
回答
69浏览
iPhone底部Safe Area遮挡输入框怎么办？
开发聊天页面时，发现iPhone X以上机型的输入框总被底部Safe Area遮挡，试过设置padding-bottom: 34px但效果不稳定，有什么可靠的解决办法吗？ 之前用过这样的CSS：.ch...
