HTML5自适应手机屏幕

最新推荐文章于 2024-08-14 19:32:44 发布

我的世界有个L

最新推荐文章于 2024-08-14 19:32:44 发布

阅读量8.2k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/lcxlxm/article/details/53117315

版权

这篇博客分享了如何使用HTML5和JavaScript实现HighCharts报表的自适应手机屏幕，提供了具体的代码示例，方便日后参考。

摘要由CSDN通过智能技术生成

从网上学到的自适应代码，用于HighCharts报表
使用js进行自适应控制，代码如下：

<script type="text/javascript">
        var phoneWidth =  parseInt(window.screen.width);
        var phoneScale = phoneWidth/640;
        var ua = navigator.userAgent;
        if (/Android (\d+\.\d+)/.test(ua)){
            var version = parseFloat(RegExp.$1);
            if(version>2.3){
                document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
            }else{
                document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
            }
        } else {
            document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
        }