Android WebView HTML / CSS布局与浏览器不同

Question

我们有一个混合应用程序，它在Android APP中加载HTML / CSS页面，当我在Mac Chrome中调试时，样式效果很好。但是当我在Android中加载页面时，布局的工作方式因设备而异。

我如何找到处理这些不同情况的方法？

抱歉，我甚至无法详细解释我的问题，因为我不知道关键点在哪里。如果你能给我一些关键词来搜索它也没关系。

HTML / CSS代码：

＆＃13;

＆＃13;

html {
  font-size: 40px;
}

.pic {
  float: left;
  width: 30%;
  position: relative;
}

.pic .pic__image {
  display: inline-block;
  width: 2.22rem;
  height: 1.667rem;
  margin-left: 1.48rem;
  float: right;
}

.note {
  position: absolute;
  width: 2.22rem;
  height: 1.667rem;
  right: 0;
}

.icon {
  display: none;
  position: absolute;
  font-family: Roboto-Regular;
  font-size: 0.27778rem;
  color: #FFFFFF;
  background: rgba(38, 38, 38, 0.60);
  box-sizing: border-box;
}

.type-3 .icon__video {
  /*Video*/
  display: inline-block;
  bottom: 2px;
  right: 0;
  border-radius: 0.91667rem;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  padding: 0 .5em;
}

.type-3 .icon__video img {
  display: inline;
  max-width: 0.2rem;
  max-height: 0.2rem;
  line-height: 0.5rem;
}

.type-4 .icon__gif {
  /*Video*/
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.833rem;
  height: 0.833rem;
  line-height: 0.833rem;
  border-radius: 100%;
  text-align: center;
}

＆＃13;

<div class="pic">
  <img src="https://unsplash.it/500/300" alt="" class="pic__image">
  <div class="note type-4">
    <div class="icon icon__gif"> GIF </div>
  </div>
</div>

<div class="pic">
  <img src="https://unsplash.it/500/300" alt="" class="pic__image">
  <div class="note type-3">
    <div class="icon icon__video">
      <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQxLjk5OSA0MS45OTkiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQxLjk5OSA0MS45OTk7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgo8cGF0aCBkPSJNMzYuMDY4LDIwLjE3NmwtMjktMjBDNi43NjEtMC4wMzUsNi4zNjMtMC4wNTcsNi4wMzUsMC4xMTRDNS43MDYsMC4yODcsNS41LDAuNjI3LDUuNSwwLjk5OXY0MCAgYzAsMC4zNzIsMC4yMDYsMC43MTMsMC41MzUsMC44ODZjMC4xNDYsMC4wNzYsMC4zMDYsMC4xMTQsMC40NjUsMC4xMTRjMC4xOTksMCwwLjM5Ny0wLjA2LDAuNTY4LTAuMTc3bDI5LTIwICBjMC4yNzEtMC4xODcsMC40MzItMC40OTQsMC40MzItMC44MjNTMzYuMzM4LDIwLjM2MywzNi4wNjgsMjAuMTc2eiIgZmlsbD0iI0ZGRkZGRiIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K">      00:11:57
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

以下是不同设备的截图：

• 在桌面Chrome中：我期待的布局
  
• 在Phone1 APP中：GIF div布局完全错误
  
• 在Phone2 APP中：GIF文字不能是垂直中心