网页代码：

<!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. [cocos2d-x]关于声音和音效

    使用声音音效 CocosDesion实现了简单易用的SimpleAudioEngine类,为了使用它,我们只需引入他的头文件即可: #include "SimpleAudioEngine.h ...

  2. Go读取yaml文件到struct类

    1.yaml文件准备 common: secretid: AKIDxxxxx secretKey: 3xgGxxxx egion: ap-guangzhou zone: ap-guangzhou-7 ...

  3. Java 进阶P-11+P-12

    文本流 在流上建立文本处理 PrintWriter pw = new PrintWriter()( new BufferedWriter( new Out put StreamWriter( new ...

  4. Git【初次提交内容（代码）到新创建的远端仓库】

    哈喽大家好,转眼到了年后了.年都过完了,就要开始工作了啊.那今天给大家带来的是(题目).因为从实习期开始,就一直用SVN,即使是使用Git的时候,也用了Sourcetree工具.直到最近打算和朋友(兮 ...

  5. 最长上升子序列 II 时间复杂度（nlogn)

    题目:最长上升子序列 II 给定一个长度为 N 的数列,求数值严格单调递增的子序列的长度最长是多少. 输入格式 第一行包含整数 N. 第二行包含 N个整数,表示完整序列. 输出格式 输出一个整数,表示 ...

  6. Vue 01 简介

    1 官网    1)英文官网: https://vuejs.org/ 2)中文官网: https://cn.vuejs.org/ 2 介绍与描述 1) 动态构建用户界面的渐进式 JavaScript ...

  7. .NET Core 日志记录程序和常用日志记录框架

    本文主要内容为.NET Core的日志记录程序和常使用的日志记录框架的简单使用 首先,打开VS2019新建一个ASP.NET Core Web Api项目,项目创建好后会有一个集成好的天气预报的类和控 ...

  8. vue＋.net入门级书签项目

    vu3+.net6 webApi 书签管理项目 前言 Gitee项目地址:https://gitee.com/zyplj/book-marks Github项目地址:https://github.co ...

  9. NoSQL(简介、历史）

    NoSQL 为什么使用NoSQL 1.单机MySQL的网站 APP----->DAL------>MySQL 90年代:一个基本的网站访问量一般不会很大,单个数据库完全足够. 那个时候,更 ...

  10. js原型链污染详解

    前言 之前打某湖论剑,两道js的题,给我整懵逼了,发现以前都没对js做过多少研究,趁着被毒打了,先研究一波js原型链,未雨绸缪. 基础 protype 首先我们研究js原型链,得搞明白原型是什么,这里 ...