相关疑难解决方法(0)

我的布局类似于:

<div>
    <table>
    </table>
</div>

我希望div只扩展到我的范围table.

对于另一个问题,我编写了这个答案,包括这个示例代码.

在该代码中,我使用鼠标滚轮来放大/缩小HTML5 Canvas.我找到了一些代码来规范Chrome和Firefox之间的速度差异.但是,Safari中的缩放处理要比其中任何一个快得多.

这是我目前的代码:

var handleScroll = function(e){
  var delta = e.wheelDelta ? e.wheelDelta/40 : e.detail ? -e.detail/3 : 0;
  if (delta) ...
  return e.preventDefault() && false;
};
canvas.addEventListener('DOMMouseScroll',handleScroll,false); // For Firefox
canvas.addEventListener('mousewheel',handleScroll,false);     // Everyone else

在Chrome v10/11,Firefox v4,Safari v5,Opera v11和IE9上滚动相同数量的鼠标滚轮时,我可以使用哪些代码来获得相同的"delta"值？

这个问题是相关的,但没有好的答案.

编辑:进一步调查显示一个滚动事件'up'是:

                  | evt.wheelDelta | evt.detail
------------------+----------------+------------
  Safari v5/Win7  |       120      |      0
  Safari v5/OS X  |       120      |      0
  Safari v7/OS X  |        12      |      0
 Chrome v11/Win7  |       120 …

我添加了"viewport"元标记"width=device-width,initial-scale=1.0",在iPad上,页面在横向模式下加载很好,它可以很好地切换到纵向,当我将其旋转回横向时,它会缩放页面,我必须将其缩放回到1比例.

我可以通过添加来修复此问题"maximum-scale=1.0, user-scalable=no",但我想知道是否有一种方法可以解决这个问题,而不会让用户放弃页面.

如果您有任何建议我很乐意听到,
谢谢!

我有一个流畅的CSS布局,当我改变方向时,它在iphone上渲染得很糟糕.(刷新时看起来很好).

我正在使用下面的代码刷新方向更改的页面,这很好 - 这只是感觉有点不对.有没有办法实现这一点,而无需重新加载整个页面？这是一个移动网站,我真的不想强迫用户加载页面两次.

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    window.location.reload()
}, false);   

编辑:

在iphone上测试时的两个主要问题是:

我有一个100%宽度,右对齐的背景图像.当我将方向从纵向更改为横向时,主体宽度保持与在纵向模式下呈现的方式相同,反之亦然.从景观到肖像更是一个问题,因为页面太宽,似乎渲染图像两次.

我有一个iphone和ipad的移动网站,我禁用用户缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

只要站点处于横向模式,这样就可以正常工作.网站的宽度正好是屏幕的宽度.然后,如果我将设备旋转到纵向模式,它会缩小,以便适合新的(较短的)宽度.这也没关系.

但是如果我将它旋转回横向模式,它会突然缩放到大约125%,这意味着现在可以进行水平滚动,并且自从最初禁用后无法进行缩放.

如何在旋转回景观时以100%变焦恢复？

谢谢!

我创建了一个带有UIWebView的裸骨iPhone应用程序(Scales Page to Fit = YES,shouldAutorotateToInterfaceOrientation = YES)并加载了一个网页,例如https://stackoverflow.com/

旋转设备显示UIWebView自动调整大小以适应宽度.好.

不正确:放大页面并缩小.现在旋转设备会在其中一个方向上以奇怪的宽度显示UIWebView(如果你放大横向,则纵向宽度很奇怪,反之亦然).仅当您导航到另一个页面时,此行为才会得到修复.

正确:在Mobile Safari中加载相同的URL.无论缩放练习如何,旋转工作和宽度都适合.

这是一个UIWebView错误(可能不是)？或者是否需要做一些事情来使事情像移动Safari一样"正常工作"？

我正在使用body标签中的onorientationchange调用显示不同的内容,具体取决于用户如何握住他/她的手机.这很有效 - 我隐藏了一个div,同时让另一个可见.

纵向模式下的div在首次加载时看起来很棒.我使用它来获得正确的比例/缩放:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

即使纵向模式中的内容运行,宽度也是正确的,用户可以向下滚动.横向模式下的显示也很完美.但是,如果横向模式中的内容要求用户向下滚动,那么当用户返回纵向模式时,屏幕将"缩小"以便说出来.无论用户是否在横向模式下向下滚动,都会发生这种情况.

我尝试了许多不同的东西来试图获得正确的屏幕比例/缩放/宽度,但没有运气.有没有办法做到这一点？

提前致谢!

在我的网络应用程序中,我有一些缩略图,点击时打开灯箱.在移动设备上,缩略图很小,用户通常会放大.问题是当他们点击播放时,灯箱位于可视区域之外(他们必须滚动到灯箱才能看到视频).是否可以强制移动浏览器缩小以便他们可以看到整个页面？

使页面更具响应性现在不是一种选择; 它是一个相当大的Web应用程序,重构需要花费大量时间.

我没有iPhone,所以我自己无法测试,但根据客户端,如果他放大以更轻松地点击链接,那么当下一页加载时页面保持放大并且用户手动必须缩小再次.

请注意,这不是响应式网站(它没有设置元宽度=设备宽度).

有什么方法可以防止这种情况吗？我尝试添加一个maximum-zoom = 1 onload仅在几秒钟后删除它,但这根本不起作用.

当谷歌搜索问题所有我能找到的是在更改webapp的方向时具有缩放级别的人去香蕉 - 这不是同一个问题.

我有一个网站使用jquery mobile为它的移动版本.我有一个问题,当我将它从纵向更改为横向时,它正确放大,但当我翻转到纵向时,它保持相同的缩放级别,并且比打破用户体验的视图更宽.我经常使用:

<meta name="viewport" content="width=device-width, initial-scale=1">

从我所做的所有搜索,这应该做.不幸的是,它不适合我.

这是我的问题,我可以使用onorientationchange事件来触发页面的大小调整,我只是不确定如何去做.你能帮帮忙吗？

PS网站在这里,如果您想看一眼http://tmg.dev.dakic.com/mobile

谢谢你,Zeljko

我正在试图弄清楚如何在ios的网页中重置缩放级别.看起来当用户进行缩放放大/缩小时,缩放功能不再有效.我想要捏手势,但想以编程方式重置缩放.任何人都有关于使用Javascript/jQuery动态更改缩放的想法？

<meta id="viewportMeta" name="viewport" content="user-scalable=1, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5" />


$(document).ready(function () {
      $("#zoomOut").click(function(){
            $('meta[name=viewport]').attr('content', 'initial-scale=0.5; maximum-scale1; user-scalable=1;');
        });

      $("#zoomIn").click(function(){
             $('meta[name=viewport]').attr('content', 'initial-scale=1; maximum-scale=1.0; user-scalable=1;');
        });
});