网页代码：

<!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. P7368 [USACO05NOV]Asteroids G

    题面 贝茜想在 \(N\times N\) 的网格中驾驶她的宇宙飞船.网格中有 \(K\) 个小行星.要使驾驶过程愉快,就必须把这些小行星全部消除. 贝茜有一个武器,可以以一个单位代价消除一行或一列的 ...

  2. 推荐一款在浏览器编辑`Blazor`的`IDE`

    不知道是否有Blazor用户羡慕过React或者Vue用户,在一些组件库中,它们就提供了在当前的组件预览对于组件的实时编辑并且预览? 比如semi-design的这种 在比如codepen这种 由于B ...

  3. DVWA靶场实战(九)——Weak Session IDS

    DVWA靶场实战(九) 九.Weak Session IDS: 1.漏洞原理: Weak Session IDS也叫做弱会话,当用户登录后,在服务器就会创造一个会话(session),叫做会话控制,接 ...

  4. hashmap的一些性能测试

    目录 0.前言 1.准备工作. 1.1模拟哈希冲突 1.2 java的基准测试. 2.测试初始化长度 3.模拟一百万个元素put,get的差异. 4.模拟无红黑树情况下get效率 4.1 将rando ...

  5. DDL_操作数据库_修改&删除&使用

    DDL_操作数据库_修改&删除&使用 3.U(Update) : 修改 修改数据库的字符集 alter database 数据库名称 character set 字符集名称; 4.D( ...

  6. java 进阶P-5.5+P-6.1

    框架加数据 以框架+数据来提高可扩展性 命令的解析是否可以脱离if-else 定义一个Handler来处理命令 用Hash表来保存命令和Handler之间的关系 抽象 Shape是什么形状 Shape ...

  7. 让Apache Beam在GCP Cloud Dataflow上跑起来

    简介 在文章<Apache Beam入门及Java SDK开发初体验>中大概讲了Apapche Beam的简单概念和本地运行,本文将讲解如何把代码运行在GCP Cloud Dataflow ...

  8. dapr入门与本地托管模式尝试

    1 简介 Dapr是一个可移植的.事件驱动的运行时,它使任何开发人员能够轻松构建出弹性的.无状态和有状态的应用程序,并可运行在云平台或边缘计算中,它同时也支持多种编程语言和开发框架.Dapr支持的语言 ...

  9. 使用 NineData 实现备份集的实时查询

    使用 NineData 实现备份集的实时查询 背景信息 数据作为一家公司的重要资产,其重要程度不言而喻.数据库为数据提供存取服务,担任着重要的角色,如果因数据误删.服务器故障.病毒入侵等原因导致数据丢 ...

  10. java的部分特性与下载安装

    Java Java的特性与优势 简单性:C++语法纯净版,没有头文件没有指针运算 面向对象:程序设计技术,重点放在对象与对象接口上,用人的思维方式去写程序,万物皆对象 可移植性:跨平台性,可以跨平台移 ...