有什么方法可以根据用户的浏览器窗口自动缩放浏览器? [英] Any way to auto zoom browser based upon user's browser window?

问题描述

有什么方法可以(跨浏览器)使我的网站根据用户的浏览器窗口自动缩放.

我有一个固定宽高比的网络应用.必须采用这种方式，因为中心功能(视频)旨在始终保留在屏幕上.我将使用带有内部 div 的侧边栏来显示可滚动内容.查看我下面的代码或以下小提琴以查看基本结构:http://jsfiddle.net/hkdeA/6/

我目前已经开发了一种尺寸，首先想到将所有像素数据转换为百分比，即响应式设计，甚至包含基于浏览器窗口的 div 重新计算(适合 100% 高度或 100% 宽度).然而，与大多数响应式设计不同，我页面上的每个元素都需要等比例缩放.对我来说，这创造了一个独特的机会.大多数响应式设计永远无法利用浏览器缩放来完成这项工作，因为他们只想放大或缩小某些元素.对我来说，一切都应该一致.遍历每一行 CSS 以将像素值转换为百分比是一项耗时的头痛，我希望如果可能的话，我可以利用浏览器缩放.

但是，是否可以让我访问浏览器缩放功能并缩放适合浏览器窗口所需的确切距离(高度或宽度，取决于浏览器窗口的纵横比)?我认为需要两个步骤.

1. 无需用户即可实际访问缩放功能.

2. 能够计算必要的缩放(看起来很容易，因为我的设计是固定宽度，因此可以计算任何浏览器窗口大小并与我的设计和计算的必要缩放百分比进行比较)并将其推送到用户的浏览器(仅适用于我的网站！)

但是有可能吗?第一个回复者说不，目前没有脚本可以做到这一点，但我希望看看其他人是否有一些见解.任何和所有的帮助表示赞赏.谢谢！

 
<div id="vid">
<div id="侧边栏">

<div id="页脚">

#容器{背景:灰色；宽度:480px；高度:270px；向左飘浮;}#视频{背景:黑色；宽度:320px；高度:180px；向左飘浮;}#侧边栏{背景:蓝色；宽度:160px；高度:180px；浮动:右；}#脚{背景:黄色；宽度:480px；高度:90px；向左飘浮;}

解决方案

您可以根据窗口尺寸和视频的纵横比调整任何元素的大小

var videoAspect= 600/400;/* normalWidth/normalHeight*/var $window = $(window), windowW= $window.width(), windowH= $window.height();var windowAspect= windowW/windowH;变量大小={}if(windowAspect > videoAspect){/* 更宽，所以将高度设置为 100% 并调整宽度*/尺寸.高度=窗口H；size.width = windowH * videoAspect;}别的{尺寸.宽度=窗口W；size.height = windowW/videoAspect;}$('#container').css(尺寸);

演示:http://jsfiddle.net/hkdeA/

Is there any way to (across browsers) cause my website to auto zoom based on the user's browser window.

I have a web app that is a fixed aspect ratio. It needs to be this way as the central function (video) is intended to stay on screen at all times. I will be using the sidebar with internal div for scrollable content. View my code below or the following fiddle to see the basic structure: http://jsfiddle.net/hkdeA/6/

I've currently developed this in one size and first thought to translate all pixel data to percentages, i.e. responsive design, with even the containing div recalculating based upon the browser window (to either fit 100% height or 100% width). However, unlike most responsive design, EVERY element on my page needs to be scaled equally. To me, this creates a unique opportunity. Most responsive design could never utilize browser zoom to do the job because they only want some elements to scale up or down. For me, everything should go in unison. Going through every line of CSS to turn pixel values to percentages is a time consuming headache and I was hoping that, if possible, I could utilize browser zoom.

However, is a way for me to access the browsers zooming capability and zoom the exact distance necessary to fit the browser window (in either height or width, depending on aspect ratio of browser window)? I'd think two steps would be necessary.

1. Being able to actually access the zoom functionality without the user.

2. Being able to calculate the zoom necessary (seems easy enough, as my design is a fixed width so any browser window size could be calculated and compared to my design and necessary zoom % calculated) and push that to the user's browser (for only my site!)

But is it possible? The first replier has said no, no script can currently do this, but I was hoping to see if anyone else has some insight. Any and all help appreciated. Thanks!

    <div id="container">
    <div id="vid">

    </div>
    <div id="sidebar">

    </div>
    <div id="footer">

    </div>    
</div>

#container{
    background:grey;
    width:480px;
    height:270px;
    float:left;
}

#vid{
    background:black;
    width:320px;
    height:180px;
    float:left;
}

#sidebar{
    background:blue;
    width:160px;
    height:180px;
    float:right;
}

#foot{
    background:yellow;
    width:480px;
    height:90px;
    float:left;
}

解决方案

You can resize any element based on window dimensions and the aspect ratio of your video

var videoAspect= 600/400;/* normalWidth/normalHeight*/

var $window = $(window), windowW= $window.width(), windowH= $window.height();
var windowAspect= windowW/windowH;
var sizes={ }
if( windowAspect > videoAspect){
   /* wider so set height 100% and adjust width*/
    sizes.height=windowH;
    sizes.width = windowH * videoAspect;
}else{
    sizes.width=windowW;
    sizes.height = windowW / videoAspect; 
}

$('#container').css( sizes);

DEMO: http://jsfiddle.net/hkdeA/

这篇关于有什么方法可以根据用户的浏览器窗口自动缩放浏览器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！