微信浏览器显示界面补全,如何适配
编写了一个界面,界面地址是
https://www.shippingex.cn/wechat-smart-shipping/html/frontend/html/hangJiaoE/hangJiaoE.html
使用微信浏览访问,显示如下,显示不全
页面代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>船交e小程序</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<style type="text/css">
.main-box {
width: 100%;
height: auto;
}
@media only screen and (min-width: 1000px) {
.main-box {
width: 1000px;
margin: 0 auto;
}
}
</style>
</head>
<body>
<div style="text-align:center" class=".main-box">
<h4>长按图片,识别二维码,进入小程序</h4>
<p>船交e二维码</p>
<img src="船交e小程序码.jpg" />
</div>
</body>
请问该如何适配显示
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
少年,网上先学习下屏幕适配的知识吧。
解决代码其中之一:
如果你希望图片跟随div的宽度的话,再给图片加上宽度就可以了。