手机加载H5页面(默认竖屏),强制横屏时页面高度取值问题

hcc656
   2015-11-17 16:37:05发布  2016-12-17 14:52:04更新 0收藏, 15593浏览
WebAPP技术
已关闭
0

描述:写了一个uixml页面 用webview加载H5报表页面,项目默认竖屏,但是这个页面强制横屏后H5页面的高度在不同手机上数值不同有些手机上没有进行等比例缩放

导致在H5页面写的heder标签展示效果差异很大

uixml页面在这种情况下是没有问题的,图中黑色的就是uixml 的Header标签

问:这种情况,H5里面的控件高度应该如何设置

测试设备:

iphone4s   正常

iphone5s   正常

tclS960t     正常

华为P7       异常

中兴Grand S2   异常

附件里面有H5代码和UIXML代码

1

2

3


test.rar

QQ图片20151117165451.jpg  (1.01M  下载次数:174次)

QQ图片20151117165416.jpg  (1.12M  下载次数:161次)

test.rar  (0.00M  下载次数:294次)

QQ图片20151117165443.jpg  (0.88M  下载次数:167次)

9个回答

0

项目默认模屏则header高度正常。

hcc656
    2015-11-17 16:55:22回答
0

感觉这个界面设计的有问题,怎么有两个标题,echart可以有自己标题。
至于高度应该和样式有关吧,没什么大问题

fiberlezp
    2015-11-17 17:03:08回答
0

你的<meta name=viewport是怎么写的?

fiberlezp
    2015-11-17 17:04:19回答
0

你怎么写的header?贴代码

gaomingzhu
    2015-11-17 17:05:28回答
0

感觉这个界面设计的有问题,怎么有两个标题,echart可以有自己标题。
至于高度应该和样式有关吧,没什么大 ...[/quote]
echart有标题,这个我知道,但是进去后不能返回啊。所以我在H5里面加了Header;
两个标题是做对比的,uixml里面的那个标题最终希望去掉

hcc656
    2015-11-17 17:30:58回答
0

你的[/quote]
这个属性就是默认的啊

hcc656
    2015-11-17 17:31:30回答
0

你怎么写的header?贴代码[/quote]

这是H5页面里的header那一块,至于写到body里面和body外面,效果是一样的,我试了

<body>
<div id="section_container">
        <section id="echart_section" data-role="section" class="active">
<header>
        <div class="titlebar">
<a data-toggle="close" href="#slideup"><i class="iconfont iconline-arrow-left"></i></a>
<h1 id="title" class="title white"></h1>.
<a  href="javascript:sousuo()">搜索</a>
        </div>
</header>

<article id="strandline_article" class="active" data-role="article" data-scroll="true" data-scroll="verticle" style="top:44px;">
        <div class="scroller">
<div id="echarts_draw" class="panel" style="position: relative;overflow: hidden; width: 100%; height: 400px;"></div>
        </div>
</article>

<footer>
</footer>
        </section>
</div>
        </body>
</html>

hcc656
    2015-11-17 17:33:42回答  2016-12-17 14:52:36更新
0

先把uixml的标题去掉试试看呢

fiberlezp
    2015-11-17 17:41:30回答
0

先把uixml的标题去掉试试看呢[/quote]

去掉了也是一样的效果,也试过了,图片是中兴手机的效果

1

QQ图片20151117174703.jpg  (0.04M  下载次数:159次)

hcc656
    2015-11-17 17:47:58回答  2016-12-17 14:52:52更新

我要回答

下载APP
扫码下载栗子社区APP