网页代码：

<!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. Hadoop生态元数据管理平台——Atlas2.3.0发布！

    大家好,我是独孤风. 今天我们来聊一下另一个元数据管理平台Apache Atlas.Atlas其实有一些年头了,是在2015年的时候就开源. 相对于Datahub来说,Atlas显得有一些" ...

  2. Web初级——CSS3

    CSS Cascding Style Sheet(层叠级联样式表) 1.前言 1.1CSS优势 内容和表现分离 可以实现CSS代码复用 利用SEO,容易被搜索引擎收录 1.2CSS导入方式 <! ...

  3. centos7.6在防火墙放开端口

    假设要在centos7.6防火墙上开启443端口 前言:文章内容可能会因环境不同而有所差异,所谓集思广益说不定灵感就来了呢; 文章初衷旨在交流学习.记录个人成长,如果能帮助到您,那就点个赞噢. 1.查 ...

  4. 把KMP算法嚼碎了喂给你吃！（C++）

    相信不少人在学数据结构的时候都被KMP算法搞的迷迷糊糊的,原理看的似懂非懂,代码写不出来,或者写出来了也不知道为什么就可以这么写.本文力求尽可能通俗详细的讲解KMP算法,让你不再受到KMP算法的困扰. ...

  5. 大公司为什么禁止SpringBoot项目使用Tomcat？

    本文已经收录到Github仓库,该仓库包含计算机基础.Java基础.多线程.JVM.数据库.Redis.Spring.Mybatis.SpringMVC.SpringBoot.分布式.微服务.设计模式 ...

  6. Linux音频采集和在国产化平台中遇到的坑（一）

    Linux音频采集和在国产化平台中遇到的坑(一) 最近在做一个国产化平台的软件项目的开发,是基于国产芯片的银河麒麟系统.其中有一个重要模块,是采集和播放音频数据,播放不用多说了,采集的话,包括采集麦克 ...

  7. 如何用Python实现http客户端和服务器

    功能:客户端可以向服务器发送get,post等请求,而服务器端可以接收这些请求,并返回给客户端消息. 客户端: #coding=utf-8import http.clientfrom urllib i ...

  8. 在 MBP（Apple M1 Pro）上捣鼓友善 nanoPi R5S——【一、构建 rkdeveloptool】

    在种草了很多天之后,最近终于在淘宝下单了友善 nanoPi R5S. 选择友善 nanoPi R5S 有两点主要理由: 1. 自带 EMMC 存储,可以使用 RockChip 提供的 MaskRom ...

  9. （一）Abp入门

    ABP 是用于创建现代Web应用程序的完整体系结构和强大的基础架构,遵循最佳实践和约定,为 您提供 SOLID 开发经验. 目前 ABP 的版本   ASP.NET Boilerplate ASP.N ...

  10. 11月29日内容总结——SQL注入问题、视图、触发器、事务、存储过程、函数、流程控制、索引、慢查询、数据库三大范式

    目录 一.SQL注入问题 SQL注入问题引入 SQL注入概念和解决方案 二.视图 三.触发器 定义 代码 1.触发器命名有一定的规律 2.临时修改SQL语句的结束符 四.事务 事务的四大特性(ACID ...