Tag: 视口

IOS的iPhone 4s不重绘dynamic图像，最初是在视口之外: 我一直在遭受一个错误：我正在做类似如下的事情： $container.on('touchmove', function(){ $container.trigger( 'lazyload.appear'); }); $img.one( 'lazyload.appear', function(){ var that= this; var $self= $(that); $self.css('background-image', "url('real.path.to.img')" ); }); 但是，在iOS上，当初始位于视口之外时，重新绘制背景图像似乎存在问题。当我拖动手指时，直到图像在视口中，除非我释放手指，否则图像不会被涂在屏幕上。我试图以实时为目标，所以我希望一旦我做了触摸移动，图像就会被显示出来，但是当它最初在视口之外时，它会被触摸显示。但是，console.log输出背景图像在释放手指之前已经改变。当图像在视口内时，重新绘制很好，当我拖动手指时，它会立即重新绘制。这似乎是一个错误，或者我错过了什么？感谢您的帮助！

从横向到纵向如何解决Viewport问题: 我一直在研究iPod和iPhone 4的Safari的视口问题，但是在这个问题上我找不到任何答案。关于从纵向到横向的问题有几条线索，但从横向到纵向不是。问题如下：我以前从肖像到风景时，有正常的缩放问题，所以我添加了标签： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 这样就解决了这个问题。现在，当我回到肖像模式，我所做的页面被拉伸，并呈现与增加的右边距。这使得页面更宽，所以你必须扫到左边来获取页面的原始位置（认为它保留了新的“右边距”）。对不起，如果有人已经回答了这个问题，但我似乎无法find任何回应这个问题。让我知道是否需要一些额外的信息。请记住这是我的第一个问题：谢谢！编辑：我正在运行iOS 6，并得到这个问题。当我在iOS 5.1.1上运行我的页面时，它显示正常，所以它可能是以前修复的视口错误的新版本。

iOS 8.3 – 1.0以下的元视口初始缩放比例会导致方向更改时出现奇怪的内容缩放: 将我的iOS设备升级到iOS 8.3后，我注意到了元视口初始缩放属性的一些奇怪的行为。如果我将初始缩放比例设置为1.0，并在网页上旋转我的设备，则整个内容将逐渐变小，最终浏览器将崩溃。我注意到，每个方向变化的内容变小的程度与您设置初始缩放比例有关。例如，如果我将其设置为0.9，内容将每次减less10％。如果将其设置为0.6，则内容将每次减less40％。由于这个bug的性质，它不能在jsfiddle上放置或体验。相反，我将在这里粘贴代码，以便您可以在某处testing它： <!doctype html> <html> <head> <title>initial scale under 1.0</title> <meta name="viewport" content="width=device-width, initial-scale=0.7, user-scalable=0" /> </head> <body> <div id = "wrapper"> <h1>Hello, run this page on iOS 8.3 device and change the orientation multiple times to make this text go smaller and eventually crash the browser!</h1> </div> </body> […]

如何在无响应的移动网站上设置视口？: 我正在devise一个无响应的网站，并在移动视图中遇到问题。我没有设置视口。我认为内容应该在桌面上显示相同，因为它只在桌面上缩小。这是我的问题的视觉：说明：在桌面上查看时很好。在iPhone（手机）标题，导航和页脚的宽度收缩（见图片），主要内容本质上超出了电话viewframe（或视口或其他）… 谢谢！

glViewport在Android和iOS中的不同结果: 我刚刚开始使用opengl的跨平台框架（iOS和Android）的渲染器。当我到视口的东西（这是分裂的东西所需要的），并注意到有一个iOS和Android之间的差异。这里有两个图像。 Android其实还有另一个小故障。它似乎包装。 iOS版我的问题。哪两个是正确的？我没有应用任何转换，而是将绘制的四分音符稍微拉回来。 glTranslatef（0.0f，0.0f，-5.f）; 初始化代码： glEnable(GL_TEXTURE_2D); glShadeModel(GL_SMOOTH); //Enable Smooth Shading glClearColor(0.f, 0.f, 0.f, 1.0f); //Black Background glClearDepthf(1.0f); //Depth Buffer Setup glEnable(GL_DEPTH_TEST); //Enables Depth Testing glDepthFunc(GL_LEQUAL); //The Type Of Depth Testing To Do //Really Nice Perspective Calculations glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST); 视口和项目代码 glViewport(viewportX, viewportY, viewportW, viewportH);. glEnable(GL_SCISSOR_TEST); glScissor(viewportX, viewportY, viewportW, viewportH); glMatrixMode(GL_PROJECTION); […]

当页面上存在更大的div时，位置固定为100％不是视口宽度: 我有一个场景，我有一个固定的页眉，这应该是100％的视口宽度，一个更大的元素，大约5000像素宽，并滚动标题下。移动浏览器似乎有一些问题没有修复头，而是显示一个更大的（比率计算??）头在iOS上滚动较慢，并突然跳过超过标题的宽度在android上的滚动位置方面跳转。标题使用100vw工作，但有时标题消失在某个断点，似乎并没有真正固定的位置。本质上，问题似乎是一个固定的元素100％！= 100％的视口，即320像素，但计算宽度是在视口的宽度和较大的元素之间的某处。任何帮助将大力赞赏！一个简化的代码示例如下… <!html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> <style> * { margin: 0; padding: 0; } .a-div { position: fixed; width: 100%; height: 100px; z-index: 1; background: dimgray; border-left: 1px solid red; border-right: 1px solid pink; } .parent { width: 5000px; overflow: hidden; } .another-div { position: […]

即使视口元标记中的分辨率宽度是1536，ipad 3设备宽度总是768？: 我想了解ios设备的视口元标记。我创build了一个testing页面，在这里我插入了一个862px宽的图像。所以我有视口元标记为： <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale: .5, maximum-scale: 5.0"> 然而在ipad 3上，分辨率宽度为1536像素，并将视口设置为等量的ipad 3的可见区域，862px图像被炸开，宽度略大于可见区域。所以我必须水平滚动才能看到图像的其余部分。这使得我认为设备宽度返回768像素，并且为862像素图像占据水平滚动的额外的一点点。为什么这样做？是否有某种像素密度我必须考虑？ UPDATE 我已经尝试将宽度设置为数字宽度，图像的相同确切宽度（在本例中为“862”）。因此，网页是862X206，与图像相同，但它的宽度与设备宽度相同。更新2 我创build了一个非常简单的页面，出于某种原因，一个带有862像素视口的空白页面导致我的iPad 3上的水平和垂直滚动，代码如下： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=862, initial-scale=1.0"> </head> <body style="width:100%; padding:0; margin:0"> </body> </html> 这种滚动导致视口不适合可视区域或屏幕大小。我不明白。任何有识之士将不胜感激。谢谢。 **注意**我忘了添加一个填充和边距重置为0，它是增加8px的边距。更新3 好吧，原来，我认为设备宽度将返回的iPad 3的1536像素的分辨率宽度。显然，它返回768像素的屏幕大小。任何超过768的视口宽度，让我滚动的iPad 3.为什么？如果你有一个1024像素的页面，并且想把它放到iPad 3的可见区域，那么你将宽度设置为1024，初始缩放为1，不应该使1024像素的视口适合可视区域？解好的，如果你想让每个设备都知道如何扩展你的页面，你所做的就是忽略初始规模。所以，如果我只设置宽度，使用设备宽度或数字值，并省略了初始缩放，它会自动为您计算缩放。它只是工作。 […]

iOS /移动Safari浏览器仍然放大，而视口设置为用户可伸缩=否？检查辅助function设置！: 这个特定的移动Safari浏览器（看似不可能，但没有logging）的问题使我今天很长一段时间不知所措，当我想出来的时候，我正要在这里发表一个关于它的问题。问题：虽然我设置了<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;"/>我的iPad的networking应用程序仍然允许手动缩放（捏在浏览器中）。 – 但只在我的iPad上，而不在我的iPhone上。此外，我会旋转设备之间的肖像风景模式，以检查具体的方向模式CSS代码，这给了奇怪的结果：从风景到肖像的旋转没有任何问题，所有东西的大小和位置都是有意义的。之后，从Portrait（肖像）旋转到Landscape（风景），视口保持与Portrait（纵向）模式一样宽。它被放大（缩放）。我不得不手动缩小以返回到完整的图片/视口。这应该是不可能的。

当iPad纵向时，缩小移动Safari浏览端口的宽度？: 我正在devise一个在iPad上以横向模式浏览时效果最佳的网站。一切都在一个1024像素宽的<div>容器中。不过，我仍然需要缩小视口，所以当用户将iPad转为纵向时，用户不必缩小或水平滚动即可查看页面上的所有内容。目前我的<head>有<meta>标签： <meta name="viewport" content="width=1024px, initial-scale=1.0, maximum-scale=10.0" /> 在横向模式下查看页面时，一切正常显示，但是我无法获得上述所需的纵向行为。我尝试将initial-scale改为0.75 ，而恰恰相反：所有内容都适合纵向模式，但iPad处于横向模式时会有额外的水平空间。有什么CSS，Javascript或特殊的视口设置，我可以用它来得到这个工作？ PS我不能使用user-scalable=no 。

打开软键盘时获取视口高度: 我一直在努力使这项工作好几天，没有运气，所以我想我会分享信息，也许有人想出了一个解决scheme。我想在软键盘启动时获得确切的视口大小。我目前正在头上使用下面的代码为了使网站响应： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 我意识到，当软键盘出现时，它使用设备高度作为视口高度，并向上推动网站的其余部分 – 这使得我从宽度=设备宽度选项获取它的高度。启动软键盘后使用以下代码： setTimeout(function() { viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'height=auto'); }, 300) 然后使用jquery获取高度在Android上显示CORRECT结果 – 也就是没有虚拟键盘的可见视口大小，但不在iOS上。我得到一个随机数字，我假设其余的meta标签不存在，所以我得到一个像75或100（在iphone 4s）数字的放大版本，我也尝试创build一个固定的元素后，使键盘了，使顶视图高度：0; 和底部：0; 属性，但我仍然得到原来的高度。更接近这一点的是，将视口元标记高度设置为一个固定的值，可以通过jquery的$(window).height() ，这意味着meta标记实际上在启动键盘后$(window).height() ，但固定高度没有真正的价值。我已经看到了很多的话题，但没有一个解决scheme。任何人有这个解决scheme？