极客观点
项目管理
HarmonyOS
下面是一个简单的H5页面，我的适配思路是这样的，获取设备的dpr(devicepixelratio)，然后根据不同的dpr动态改变initial-scale，适配思路应该没问题，但是页面在ios的webview里出现无法运行js代码的情况，从而导致页面显示太大，只有<script>标签存在type="text/script"时才能适配ios，不写type或者写type="text/javascript"都无法执行js的代码，请问这个问题是ios webview的bug吗？因为w3c官方js的type类型是text/javascript而不是text/script。
注：下面的代码在微信QQ或者浏览器里打开都是正常适配的，就在ios的webview里无法适配。
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0">
<title>8.31提现送红包活动</title>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html{
font-size: 10px;
}
body{
font-size: 1.5rem;
color: #666;
text-align: justify;
background: #f3f3f3;
}
.wrap{
height: 100%;
background: #fff;
border-bottom: 1px solid #d9d9d9;
padding-bottom: 5rem;
}
.paragrah{
width: 92%;
margin: 1.5rem auto;
line-height: 2.5rem;
}
.paragrah__notice{
color: #ff3976;
font-weight: bold;
}
li{
list-style: none;
}
.paragrah:nth-child(1){
margin-top: 0;
padding-top: 3.5rem;
}
html[data-dpr="2"] {
font-size: 20px;
}
html[data-dpr="3"] {
font-size: 30px;
}
.paragrah--center{
text-align: center;
font-size: 2rem;
font-weight: bold;
color: #000;
}
.paragrah--3steps{
background: #fcf8d8;
margin-top: 0.15rem;
padding: 1.2rem;
color: #ffae37;
box-sizing: border-box;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
.condition{
font-weight: bold;
padding-bottom: 1rem;
}
</style>
</head>
<body>
<div class="wrap">
<div class="paragrah paragrah--center">8.31提现送8888集分宝活动</div>
<div class="paragrah"><span class="paragrah__notice">活动时间：</span>2016年8月</div>
<div class="paragrah"><span class="paragrah__notice">活动对象：</span>满足以下2个条件的会员</div>
<div class="paragrah">
<ul>
<li class="condition">1、2016年8月（8.1-8.31）通过去淘宝、天猫购物超过1000集分宝以上</li>
<li class="condition">2、提现超额回馈日 8月31日提现（本次活动只针对集分宝提现）</li>
</ul>
</div>
<div class="paragrah">
<span class="paragrah__notice">奖励方式：</span>奖励和提现一起支付到你的支付宝
</div>
<div class="paragrah">
其中，当日申请提现单笔达到：
<ul>
<li>100000集分宝或以上 一次性 <strong class="paragrah__notice">奖励8888集分宝</strong></li>
<li>50000集分宝或以上 一次性<strong class="paragrah__notice">奖励3888集分宝</strong></li>
<li>20000集分宝或以上 一次性<strong class="paragrah__notice">奖励1188集分宝</strong ></li>
<li>10000集分宝或以上 一次性<strong class="paragrah__notice">奖励508集分宝</strong></li>
</ul>
</div>
<div class="paragrah">
这几天，赶紧通过购物累积集分宝吧！也可帮亲朋好友买东西，用你的账号累积哦~
</div>
<div class="paragrah paragrah--3steps">
淘宝天猫购物省钱3步曲：
<ul>
<li>1、复制淘宝天猫宝贝名称到</li>
<li>2、在搜索结果页找到要买的宝贝购买</li>
<li>3、确认收货后2小时回！</li>
</ul>
</div>
<div class="paragrah">集分宝可以到淘宝购物抵扣现金哦~所有宝贝都可以用集分宝抵扣。</div>
</div>
<script type="text/script">
var dpr = window.devicePixelRatio;
var root = document.getElementsByTagName('html')[0];
root.setAttribute("data-dpr",dpr);
switch (dpr){
case 1:
document.querySelector("meta[name=viewport]").setAttribute('content',
'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
break;
case 2:
document.querySelector("meta[name=viewport]").setAttribute('content',
'width=device-width, initial-scale=0.5, maximum-scale=1.0, user-scalable=0');
break;
case 3:
document.querySelector("meta[name=viewport]").setAttribute('content',
'width=device-width, initial-scale=0.3, maximum-scale=1.0, user-scalable=0');
break;
}
</script>
</body>
</html>
QQ20160815-0@2x.png
↑ type是text/javascript时适配失败
↑ type是text/script时适配成功
ios