网页代码：

<!DOCTYPE html>

<html>

<head>

<style>

body

{

margin:0;

padding:0;

width:100%;

height:100%;

background-color: #282828;

}

/*自定义悬浮菜单中滚动条*/

::-webkit-scrollbar-button {

    display: none;

}

::-webkit-scrollbar-track {

    background-color: #eaeaea;

    border-left: 1px solid #cecece;

    border-radius: 5px;

    box-shadow: none;

    border: 0;

}

::-webkit-scrollbar {

    width: 5px;

    height: 5px;

}

::-webkit-scrollbar-thumb {

    background-color: #cecece;

    border-radius: 5px;

    box-shadow: none;

    border: 0;

}

::-webkit-scrollbar-thumb:hover {

    background-color: #aaa;

}

</style>

</head>

<body>

  <svg id="main" style="margin: 0px; overflow: hidden;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  data-version="v6.5.36" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1452 860" width="1452" height="860"><image xlink:href="./jxsbback.png" x="0px" y="0px" width="1452px" height="860px"></image><foreignObject x="383px" y="165px" width="682px" height="384px"><video width="100%" height="100%" controls="controls" autoplay="autoplay"><source src="./video/aaa.mp4" type="video/mp4" /></video></foreignObject></svg>

  <script type="text/javascript">

     //调整浏览器窗口大小事件

    window.onresize = function(){

        _autoZoom();

    }

    _autoZoom();

    function _autoZoom(){

         var svg = document.getElementById("main");

        if (svg) {

            svg.setAttribute("preserveAspectRatio", "xMinYMin meet");

            svg.setAttribute("viewBox", "0 0 1452 860");

            svg.style.overflow = "hidden";

            var viewBoxVal = svg.getAttribute("viewBox");

            if (viewBoxVal) {

                var viewBoxWidth = viewBoxVal.split(" ")[2];

                var viewBoxHeight = viewBoxVal.split(" ")[3];

                svg.removeAttribute("width");

                svg.removeAttribute("height");

                var setWidth = document.body.clientWidth;

                var setHeight = setWidth * viewBoxHeight / viewBoxWidth;

                svg.setAttribute("width", setWidth);

                svg.setAttribute("height", setHeight);

            }

        }

    }

</script>

</body>

</html>

使用svg让页面自适应浏览器大小，整体等比缩放的更多相关文章

  1. css自适应浏览器大小

    css自适应浏览器大小 1.屏幕 > 900px :显示3列 2.450px < 屏幕 < 900px :显示2列 3.屏幕 < 450px :显示1列 <!DOCTYP ...

  2. jQuery easyui layout布局自适应浏览器大小(转)

    首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...

  3. HTML中使背景图片自适应浏览器大小

    由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...

  4. Echarts自适应浏览器大小

    var myChart = echarts.init(document.getElementById('sitesChar')); var option = { title : { text: 'No ...

  5. Python+Selenium自动化-设置浏览器大小、刷新页面、前进和后退

    Python+Selenium自动化-设置浏览器大小.刷新页面.前进和后退   1.设置浏览器大小 maximize_window():设置浏览器大小为全屏 set_window_size(500,5 ...

  6. echarts图表自适应浏览器窗口的大小

    echarts问题描述 当浏览器窗口发生变化时,echarts图表未能自适应浏览器的变化,产生如下的效果 解决方案 在$(function(){}中添加 window.onresize = funct ...

  7. HTML5 移动页面自适应手机屏幕四类方法

    1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...

  8. 》》HTML5 移动页面自适应手机屏幕四类方法

    1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...

  9. Web前端页面的浏览器兼容性测试心得（三）总结一些IE8兼容问题的解决方案

    由于IE8不支持HTML5,而它又是Win7的默认浏览器,我们即使讨厌它,在这几年却也拿它没办法. 最近做了个需要兼容IE8的项目,不可避免地用了HTML5+CSS3,甚至canvas和svg,做兼容 ...

  10. 手机端页面自适应解决方案—rem布局（该方案目前已过时）

    转自:https://segmentfault.com/a/1190000004705207 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局fl ...

随机推荐

  1. cmd无限弹窗

    记一次写 .bat 文件时犯的低级错误,搞的重启了好几次才发现问题所在 如下 文件名 和 批处理 内容 会造成 无限弹出cmd窗口 原因是一般情况下会启动系统的 cmd.exe,而此处用的简写,在执行 ...

  2. JS比较数值大小

    一. 简单循环算法 代码如下: const numbers = [5, 6, 2, 3, 7]; let max = -Infinity; for (let i = 0; i < numbers ...

  3. vue多界面开发

    1. 安装 vue-cli,已有的请跳过这一步 npm install -g @vue/cli 若已安装旧版 vue-cli 则需要先卸载 vue-cli npm uninstall -g vue-c ...

  4. s2-007

    漏洞名称 S2-007 CVE-2012-0838 远程代码执行 利用条件 Struts 2.0.0 - Struts 2.2.3 漏洞原理 age来自于用户输入,传递一个非整数给id导致错误,str ...

  5. [cocos2d-x]飞机大战 遇到的bug和总结（一）

    第一点: Sequence* sequence=Sequence::create(actionMove, actionFinished,NULL); create方法的最后必须加上NULL,不然会报出 ...

  6. 线段树套线性基——题解P4839 P哥的桶

    文章历史 2022-08-03: 文章初稿,由于对算法介绍过于少而被管理员打回重造. 2020-08-06:将算法介绍进行扩写,并删除了一些可有可无的内容或玩梗内容. 管理员审核题解辛苦了. 简要题意 ...

  7. mysql 列约束

    mysql可以对插入的数据进行特定得验证,只有满足条件才可以插入到数据表中,否则认为是非法插入: 例如:人性别只可以是男.女.年龄只能是0-100. ①主键约束查重-PRIMARY KEY,1表一个: ...

  8. 自从学习了MongoDB高可用，慢慢的喜欢上了它，之前确实冷落了

    大家好,我是哪吒,最近项目在使用MongoDB作为图片和文档的存储数据库,为啥不直接存MySQL里,还要搭个MongoDB集群,麻不麻烦? 让我们一起,一探究竟,继续学习MongoDB高可用和片键策略 ...

  9. maven依赖管理，生命周期，插件

    依赖配置 依赖指当前项目运行所需的jar,一个项目可以设置多个依赖,在pom.xml中格式如下 <!--设置当前项目所依赖的所有jar--> <dependencies> &l ...

  10. 【分析笔记】NXP PCF85263 设备驱动分析笔记

    驱动移植 供应商无法提供相应的驱动程序,不过在 linux 最新的内核倒是有一份 pcf85363 的驱动,看代码并核对寄存器功能,是可以兼容 pcf85263 芯片.只是我们用的内核比较老 linu ...