网页代码：

<!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. 用Java写一个PDF，Word文件转换工具

    前言 前段时间一直使用到word文档转pdf或者pdf转word,寻思着用Java应该是可以实现的,于是花了点时间写了个文件转换工具 源码weloe/FileConversion (github.co ...

  2. 如何优雅地升级一个Creator 2.x 项目到 3.6.2 ？

    最近,我将之前用 Cocos Creator 2.x 写的一个微信小游戏<球球要回家>移植到了 Cocos Creator 3.6.2 上. 编程语言也从 JavaScript 迁移到了 ...

  3. 迷宫机器人最短路径使用tkinter绘制

    起因 我想要写一个玩家和机器对战的迷宫游戏.这个项目我没有写完,我实现了最短机器人路径并绘制在tkinter上,以及玩家移动的功能.更多的关于GUI的设计太花时间了我没有写完. 算法介绍 我在写机器人 ...

  4. yarn使用 以及和npm对比

    yarn是facebook发布的一款取代npm的包管理工具. yarn的特点: 速度超快. Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载. 同时利用并行下载以最大化资源利用率,因此安装速 ...

  5. Java基础1-1-3—java基础语法（条件控制语句）

    3. 条件控制语句 3.1 流程控制语句-顺序结构 流程控制语句:通过一些语句,来控制程序的[执行流程] 流程控制语句分类: 顺序结构 分支结构(if,switch) 循环结构(for,while,d ...

  6. 结对项目总结 -- 基于Qt开发的win10桌面应用

    担任角色 在这次结对项目中,由于采用了我的个人项目作为参考,所以我继续担任后端开发的角色. 开发环境 前端采用Qt Creator4.13.2 (Community) 后端采用C++ 如何复用个人项目 ...

  7. 【LeetCode】三数之和+四数之和（双指针）

    之所以放在一起是因为,"四数之和"的解题方法基本与"三数之和"一致 由此我们可以推出n数之和的解法 本质上,我们只是使用双指针的方法降低此类问题的时间复杂度 当 ...

  8. R数据分析：孟德尔随机化中介的原理和实操

    中介本身就是回归,基本上我看到的很多的调查性研究中在中介分析的方法部分都不会去提混杂,都是默认一个三角形画好,中介关系就算过去了,这里面默认的逻辑就是前两步回归中的混杂是一样的,计算中介效应的时候就自 ...

  9. mysql19-锁

    1.什么是锁 锁是计算机协调多个进程或线程并发访问某一资源的机制.在数据库中,除传统的计算资源(如CPU.RAM.I/O等)的争用以外,数据也是一种供许多用户共享的资源.如何保证数据并发访问的一致性. ...

  10. Android 分区和内存监控

    Android 分区和内存监控 Andorid之所以是分区,是因为各自有对应的功能和用途的考量,可以进行单独读写和格式化. Android 设备包含两类分区: 一类是启动分区,对启动过程至关重要. 一 ...