将视口设置为缩放以适合宽度和高度
[英]Setting the Viewport to Scale to Fit Both Width and Height
问题描述
我正在开发一个适合特定宽度和高度的网站（885x610 div，1px边框和3px上边距）。 我希望用户永远不必滚动或缩放以查看整个div; 它应该始终完全可见。 由于设备具有多种分辨率和宽高比，因此我想到的想法是使用JavaScript动态设置“视口”元标记。 这样，div将始终具有相同的尺寸，不同的设备必须以不同的方式进行缩放，以便在视口中适合整个div。 我尝试了我的想法并得到了一些奇怪的结果。
以下代码适用于第一页加载（在Android 4.4.0上的Chrome 32.0.1700.99中测试），但在刷新时，缩放级别会发生变化。 此外，如果我注释掉alert ，它甚至在第一页加载时也不起作用。
小提琴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<script type="text/javascript">
function getViewportWidth() {
if (window.innerWidth) {
return window.innerWidth;
}
else if (document.body && document.body.offsetWidth) {
return document.body.offsetWidth;
}
else {
return 0;
}
}
function getViewportHeight() {
if (window.innerHeight) {
return window.innerHeight;
}
else if (document.body && document.body.offsetHeight) {
return document.body.offsetHeight;
}
else {
return 0;
}
}
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
var actual_width = getViewportWidth();
var actual_height = getViewportHeight();
var min_width = 887;
var min_height = 615;
var ratio = Math.min(actual_width / min_width, actual_height / min_height);
if (ratio < 1) {
document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + actual_width);
}
}
alert(document.querySelector('meta[name="viewport"]').getAttribute('content'));
</script>
<title>Test</title>
<style>
body {
margin: 0;
}
div {
margin: 3px auto 0;
width: 885px;
height: 610px;
border: 1px solid #f00;
background-color: #fdd;
}
</style>
</head>
<body>
<div>
This div is 885x610 (ratio is in between 4:3 and 16:10) with a 1px border and 3px top margin, making a total of 887x615.
</div>
</body>
</html>
我该怎么做才能让这个网站扩展到适合宽度和高度？
7 个解决方案
解决方案1
8 2014-02-12 07:27:43
可以获得一致的行为。 但不幸的是，它非常复杂。 我正在编写一个脚本来检测欺骗代理并相应地将视口动态地重新缩放到桌面或其他欺骗代理。 我还面临着Android / Chrome以及iOS模拟器的缩放问题......
要绕过它，您需要禁用缩放和/或设置视口两次。 在第一遍中，最好像现在一样在<head>内联，设置缩放并暂时禁用用户缩放以防止缩放问题，对所有3个缩放使用相同的固定值，如：
document.querySelector('meta[name=viewport]').setAttribute('content', 'width='+width+',minimum-scale='+scale+',maximum-scale='+scale+',initial-scale='+scale);
然后，为了恢复缩放，您在DOMContentLoaded再次设置视口，具有相同的比例，除了这次您设置正常的最小/最大比例值以恢复用户缩放：
document.querySelector('meta[name=viewport]').setAttribute('content', 'width='+width+',minimum-scale=0,maximum-scale=10');
在您的上下文中，因为布局是固定的并且大于视口，所以对于DOMContentLoaded的更合理的替代方案，可能需要initial-scale='+scale ：
document.querySelector('meta[name=viewport]').setAttribute('content', 'width='+width+',minimum-scale=0,maximum-scale=10,initial-scale='+scale);
这应该让视口在Webkit浏览器中重新调整，而不会出现缩放问题。 我只说在webkit中，因为遗憾的是IE和Firefox不支持更改视口，因为视频端口，尺寸和设备像素比率的浏览器兼容性表显示： http ： //www.quirksmode.org/mobile/tableViewport.html
IE有自己的方式来动态更改视口，实际上IE快照模式需要响应。 http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
因此，对于IEMobile和IE SnapMode（IE10和11），您需要在<head>动态插入内联<style> 。
<script>
var s = document.createElement('style');
s.appendChild(document.createTextNode('@-ms-viewport{width:'+width+'px')+';}'));
document.head.appendChild(s);
</script>
不幸的是，Firefox既没有：视口是一次性设置的，如上面的兼容性表所示。 目前，由于缺乏其他方法，使用CSS Transform（如@imcg所指出的）是在Android或Gecko OS上改变FireFox Mobile视口的唯一方法。 我刚刚测试了它，它适用于固定尺寸设计的环境。 （在“响应式设计上下文”中，布局可以通过CSS Transform重新调整，例如在手机上的桌面大小，但Firefox仍然可以读取手机大小的MQ。所以这在RWD上下文中应该注意./除了webkit ）
虽然，我注意到一些随机的Webkit崩溃与Android上的CSSTransform，所以我建议将Safari / Chrome / Opera的视口方法更可靠。
此外，为了获得视口宽度的跨浏览器可靠性，您还必须面对/修复innerWidth的浏览器之间的整体不一致性（请注意， documentElement.clientWidth在内部宽度上获得准确的布局像素宽度更加可靠）您还必须处理quirksmode.org表中指示的devicePixelRatio差异。
更新：实际上经过多次考虑解决我自己的Firefox问题的解决方案后，我发现了一种方法来覆盖Firefox Mobile中的视口，使用document.write() ，只应用一次：
document.write('<meta name="viewport" content="width='+width+'px,initial-scale='+scale+'">');
刚刚在Webkit和Firefox中成功测试了这一点，没有缩放问题。 我不能在Window Phones上测试，所以我不确定itf document.write适用于IEMobile ......
解决方案2
4 2016-07-06 22:30:29
我知道这已经晚了两年，但我花了很多时间研究这个问题，并希望分享我的解决方案。 我发现原来的问题非常有用，所以我觉得发布这个答案是我的回馈方式。 我的解决方案适用于iPhone6和7“Galaxy Tab。我不知道它在其他设备上的表现如何，但我猜它应该主要表现。
我将视口逻辑分离为外部文件，以便于重用。 首先，以下是您将如何使用代码：
<HTML>
<HEAD>
<SCRIPT type="text/javascript" src="AutoViewport.js"></SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
AutoViewport.setDimensions(yourNeededWidth, yourNeededHeight);
</SCRIPT>
<!-- The rest of your HTML goes here -->
</BODY>
</HTML>
实际上，我将所需的宽度和高度填充了一小部分（大约15个像素），这样我的预期显示效果很好。 另请注意您在HTML中不必指定视口标记的使用代码。 如果还没有，我的库会自动为您创建一个。 这是AutoViewport.js：
/** Steven Yang, July 2016
Based on http://stackoverflow.com/questions/21419404/setting-the-viewport-to-scale-to-fit-both-width-and-height , this Javascript code allows you to
cause the viewport to auto-adjust based on a desired pixel width and height
that must be visible on the screen.
This code has been tested on an iPhone6 and a 7" Samsung Galaxy Tab.
In my case, I have a game with the exact dimensions of 990 x 660. This
script allows me to make the game render within the screen, regardless
of whether you are in landscape or portrait mode, and it works even
when you hit refresh or rotate your device.
Please use this code freely. Credit is appreciated, but not required!
*/
function AutoViewport() {}
AutoViewport.setDimensions = function(requiredWidth, requiredHeight) {
/* Conditionally adds a default viewport tag if it does not already exist. */
var insertViewport = function () {
// do not create if viewport tag already exists
if (document.querySelector('meta[name="viewport"]'))
return;
var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=max-device-width, height=max-device-height,initial-scale=1.0";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);
};
var isPortraitOrientation = function() {
switch(window.orientation) {
case -90:
case 90:
return false;
}
return true;
};
var getDisplayWidth = function() {
if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
if (isPortraitOrientation())
return screen.width;
else
return screen.height;
}
return screen.width;
}
var getDisplayHeight = function() {
if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
if (isPortraitOrientation())
return screen.height;
else
return screen.width;
}
// I subtract 180 here to compensate for the address bar. This is imperfect, but seems to work for my Android tablet using Chrome.
return screen.height - 180;
}
var adjustViewport = function(requiredWidth, requiredHeight) {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)){
var actual_height = getDisplayHeight();
var actual_width = getDisplayWidth();
var min_width = requiredWidth;
var min_height = requiredHeight;
var ratio = Math.min(actual_width / min_width, actual_height / min_height);
document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + actual_width);
}
};
insertViewport();
adjustViewport(requiredWidth, requiredHeight);
window.addEventListener('orientationchange', function() {
adjustViewport(requiredWidth, requiredHeight);
});
};
如果您将我的代码与问题中的原始代码进行密切比较，您会发现一些差异。 例如，我从不依赖视口宽度或高度。 相反，我依赖于屏幕对象。 这很重要，因为当您刷新页面或旋转屏幕时，视口宽度和高度可能会发生变化，但screen.width和screen.height永远不会改变。 接下来你要注意的是我不做检查（比率<1）。 刷新或旋转屏幕时，该检查导致不一致，因此我将其删除。 此外，我还包括一个屏幕旋转处理程序。
最后，我只想感谢创建这个问题的人为奠定基础，这节省了我的时间！
解决方案3
3 2014-02-06 22:34:17
如果通过更改视口元标记无法在设备之间获得一致的行为，则可以使用CSS3变换在不更改维度的情况下进行缩放：
if (ratio < 1) {
var box = document.getElementsByTagName('div')[0];
box.style.webkitTransform = 'scale('+ratio+')';
box.style.webkitTransformOrigin = '0 0';
}
console.log(box.offsetWidth); // always original width
console.log(box.getBoundingClientRect().width); // new width with scaling applied
注意我在这里省略了除webkit之外的任何供应商前缀，以保持简单。
要使缩放的div居中，您可以使用translate tranforms：
var x = (actual_width - min_width * ratio) / 2;
var y = (actual_height - min_height * ratio) / 2;
box.style.webkitTransform = 'translateX('+x+'px) translateY('+y+'px) scale('+ratio+')';
box.style.webkitTransformOrigin = '0 0';
解决方案4
3 2014-02-08 07:24:38
用以下内容替换您的视口：
<META NAME="viewport" CONTENT="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
这里的user-scalable = 0将为您完成工作。
这对你有用。如果它仍然不起作用，我们将不得不扩展视口，所以替换你的视口并添加：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
对于您的javascript错误，请查看此链接：
解决方案5
0 2014-02-06 05:48:00
将div的父元素（ html和body ）的高度和宽度设置为100％并将边距置零。
html, body {
margin: 0;
height: 100%;
width: 100%;
}
接下来，因为您需要在div上使用边框，所以在指定元素的宽度/高度时需要确保包含边框宽度，为此，请使用div上的box-sizing: border-box 。
因为你想要div的3px上边距div的相对位置将导致高度为3px太高。 要解决此问题，请使用div上的绝对定位，并将top，left和bottom设置为0。
div {
position: absolute;
top: 3px;
left: 0;
bottom: 0;
box-sizing: border-box;
width: 100%;
border: 1px solid #f00;
background-color: #fdd;
}
这是一个有效的例子 。
更新：我想我误解了这个问题。 这是一个示例代码，可根据设备的视口调整“缩放”
http://jpanagsagan.com/viewport/index2.html
请注意，我使用jquery附加元标记，因为我在使用vanilla append时遇到问题。
我注意到的一件事是，如果您在HTML中进行硬编码并通过JS进行更改，则文档将不会应用更正（需要验证）。 如果HTML中没有先前的标记，我可以通过JS更改它，因此我使用了append。
您可以使用比率，但在示例中，我使用视口的宽度除以div的宽度。
希望这可以帮助。
解决方案6
0 2014-02-12 05:35:24
更新：我想我误解了这个问题。 这是一个示例代码，可根据设备的视口调整“缩放”
http://jpanagsagan.com/viewport/index2.html
请注意，我使用jquery附加元标记，因为我在使用vanilla append时遇到问题。
我注意到的一件事是，如果您在HTML中进行硬编码并通过JS进行更改，则文档将不会应用更正（需要验证）。 如果HTML中没有先前的标记，我可以通过JS更改它，因此我使用了append。
您可以使用比率，但在示例中，我使用视口的宽度除以div的宽度。
希望这可以帮助。
解决方案7
0 2017-06-21 06:25:33
我认为史蒂文应该是公认的答案。
如果它对其他人有帮助，我会在Steven的AutoViewport.js中添加以下两项内容，以便在用户处于横向视图时将视图置于视口中心：
添加“var viewport_margin = 0;” 作为第一行代码（因为它是“函数AutoViewport（）{}之前的自己的行”。
添加“viewport_margin = Math.abs（actual_width-（ratio * requiredWidth））/（actual_width * 2）* 100;” 在读取“document.querySelector（'meta [name =”viewport“]'）的行之后.setAttribute（'content'，'initial-scale ='+ ratio +'，maximum-scale ='+ ratio +'，最小值-scale ='+ ratio +'，user-scalable = yes，width ='+ actual_width）;“
感谢所有发布此解决方案的人。
更新：在Android中，我的添加内容似乎只适用于API 24+。 不确定他们为什么不使用API 19-23。 有任何想法吗？
如何缩放我的SVG内部元素以适合窗口的宽度和高度
[英]How to scale my svg internal elements to fit the window in width and height
设置视口，初始比例和设备宽度不会调整为设备宽度
[英]Setting viewport, initial scale, and device width doesn't resize to device width
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.