微信浏览器显示界面补全,如何适配

发布于 2022-09-12 04:23:41 字数 1235 浏览 22 评论 0

编写了一个界面,界面地址是

https://www.shippingex.cn/wechat-smart-shipping/html/frontend/html/hangJiaoE/hangJiaoE.html

使用微信浏览访问,显示如下,显示不全
image.png
页面代码如下

<!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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

红ご颜醉 2022-09-19 04:23:41

少年,网上先学习下屏幕适配的知识吧。

解决代码其中之一:

.main-box img{
    max-width: 1000px; /* 图片最大宽度1000px */
    width: 80vw; /* 图片宽度占比屏幕宽度80% */
}

如果你希望图片跟随div的宽度的话,再给图片加上宽度就可以了。

.main-box img{
    width: 100%;
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文