在方向更改后更改视口宽度后如何适应屏幕？
Ada*_*rin 19 javascript mobile android tablet ios
我需要页面的视口宽度为横向950px和纵向630px.遗憾的是,这些像素宽度不灵活.
我正在使用CSS媒体查询根据方向调整DOM内容的宽度.
我正在侦听JS中的方向更改事件,以便在方向更改时调整视口大小.
初始页面加载(纵向或横向)上的一切看起来都很好.
但是,在方向更改后,Mobile Safari会保留先前的比例设置,而不是将视口拟合到屏幕.双击或两次拉直.但我需要自动化.
我已经附上了下面的源代码,并将其上传到了一个演示URL.
以下是方向更改后拍摄的屏幕截图:从横向到纵向,从纵向到横向.
如何强制Safari自动将视口宽度设置为屏幕宽度？或者我这样做是错的？
更改视口中的各种比例设置没有帮助.设置maximum-scale=1.0或initial-scale=1.0似乎覆盖我的width设置width为device-width(即iPad 2上的1024或768),留下死边距.设置minimum-scale=1.0似乎什么都不做.
<!DOCTYPE html>
<html>
<head>
<title>iPad orientation</title>
<meta name="viewport" content="user-scalable=yes">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">;
/**
* update viewport width on orientation change
*/
function adapt_to_orientation() {
// determine new screen_width
var screen_width;
if (window.orientation == 0 || window.orientation == 180) {
// portrait
screen_width = 630;
} else if (window.orientation == 90 || window.orientation == -90) {
// landscape
screen_width = 950;
}
// resize meta viewport
$('meta[name=viewport]').attr('content', 'width='+screen_width);
}
$(document).ready(function() {
// bind to handler
$('body').bind('orientationchange', adapt_to_orientation);
// call now
adapt_to_orientation();
});
</script>
<style type="text/css" media="screen">
body {
margin: 0;
}
#block {
background-color: #333;
color: #fff;
font-size: 128px;
/* landscape */
width: 950px;
}
#block .right {
float: right
}
@media only screen and (orientation:portrait) {
#block {
width: 630px;
}
}
</style>
</head>
<body>
<div id="block">
<div class="right">→</div>
<div class="left">←</div>
</div>
</body>
</html>
小智 9
我有这个问题并写了一些JavaScript来解决它.我把它放在Github这里:
https://github.com/incompl/ios-reorient
以下是为方便起见的代码:
window.document.addEventListener('orientationchange', function() {
var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (iOS && viewportmeta) {
if (viewportmeta.content.match(/width=device-width/)) {
viewportmeta.content = viewportmeta.content.replace(/width=[^,]+/, 'width=1');
}
viewportmeta.content = viewportmeta.content.replace(/width=[^,]+/, 'width=' + window.innerWidth);
}
// If you want to hide the address bar on orientation change, uncomment the next line
// window.scrollTo(0, 0);
}, false);
好的,*-scale毕竟答案在于属性.
您可以通过设置两个强制特定比例maximum-scale,并minimum-scale以相同的值.但是你必须通过设置meta标签来牺牲用户扩展<meta name='viewport' content='user-scalable=no' />.
请注意,这些*-scale设置与设备的屏幕尺寸有关 - 这些尺寸因设备而异.幸运的是,您可以screen在JS 中的对象中查找这些内容.
因此,如果您的内容宽度低于980,那么您的强制比例应为screen_dimension / content_width.
我上面的JS的这个更新版本使方向更改顺利进行.在iPhone 4和iPad 2上测试过.
function adapt_to_orientation() {
var content_width, screen_dimension;
if (window.orientation == 0 || window.orientation == 180) {
// portrait
content_width = 630;
screen_dimension = screen.width * 0.98; // fudge factor was necessary in my case
} else if (window.orientation == 90 || window.orientation == -90) {
// landscape
content_width = 950;
screen_dimension = screen.height;
}
var viewport_scale = screen_dimension / content_width;
// resize viewport
$('meta[name=viewport]').attr('content',
'width=' + content_width + ',' +
'minimum-scale=' + viewport_scale + ', maximum-scale=' + viewport_scale);
}
| 归档时间： |
|
| 查看次数： |
53264 次 |
| 最近记录： |