标签: viewport
我有两个宽度声明.哪一个会被应用？
假设我们有一个HTML页面,其结构为
<html>
<body>
<table id="myTable">
</table>
</body>
</html>
现在我将CSS定义为;
#myTable {width:100%;width:900px;}
现在我的问题是这个表间接地受到视口(或可用的浏览器空间)的影响那么2个值(px或%)中的哪些会赢？这是表格在布局中实际占用多少空间？如果当前的浏览器空间是1000px,那么它是否需要该值(这意味着100%覆盖900 px值)在更广泛的层面上,我们可以推广这个工作,即%或px值总是赢吗？这取决于设置的DOCTYPE吗？
请帮我.骗过你
推荐指数
解决办法
查看次数
如何将网站扩展到iPhone的宽度？
我有液体布局网站,在1920x1080px上显示(8 x 240px)列.它们之间没有空格.我把这个添加到了HEAD:
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=yes,width=960" >
<meta name="viewport" content="width=device-width; height=device-height;">
我在上面的代码中尝试了不同的设置,但无论我在iPhone 2G和4S上做什么,它总是显示(4 x 240px)列(480×320px和960x640px分辨率).
我希望它显示3或2列,因为第一列包含文本,现在几乎无法读取.
我只想在iPhone上将宽度除以2.如何才能做到这一点？
此外,当我制作浏览器480x320px时,我的网站在iPhone(480x320px)和桌面上的显示方式不同.这是为什么？
推荐指数
解决办法
查看次数
Javascript Viewport淡出淡出
我正在努力完成一些如此简单的事情,这很痛苦,但是经过几个小时的工作我还没有好运.
我有4个div,每个都有'.slide'类.我想做的就是让它们不可见,但是当它们在视口中时会淡入.如果他们离开视口,他们应该返回隐形状态.有任何想法吗？
$('.slide').waypoint(
function() {
if( $(this).is(":in-viewport") ) {
$(this).animate({
opacity: 1
}, 100);
}
$('.slide').not(this).animate({
opacity: 0
}, 100);
},
{
offset: function() {
return $.waypoints('viewportHeight') - document.getElementById('navigation').clientHeight;
}
}
);
推荐指数
解决办法
查看次数
在视口调整大小而不切断边的情况下调整图像大小
我有一个CSS问题.我有一个1024x500像素的图像.现在的问题是,只要浏览器窗口/视口的宽度变化低于图像宽度(1024px),图像就会开始被切断.现在,正如您所看到的,当视口大小低于1024px时,我将容器宽度设置为100%,并且它按比例调整大小,但随着浏览器调整大小(更小),我的图像的边会越来越多.
任何人都可以帮助我让我的图像动态调整像素为像素(不丢失任何原始图片 - 没有切断)？
查看我的网页并调整浏览器窗口大小以查看我的意思.注意图像的两侧被切掉......
HTML:请注意我的原始图像是1024x500
<div class="ei-slider">
<ul class="ei-slider-large">
<li>
<img src="http://lamininbeauty.co.za/images/large/makeup.jpg" alt="Vertical Sunbed TanCan"/>
</li>
</ul>
</div>
CSS:
大屏幕的普通CSS
.ei-slider{
position: relative;
width: 1024px;
height: 500px;
margin: 0 auto;
}
.ei-slider-large{
height: 100%;
width: 100%;
position:relative;
overflow: hidden;
}
.ei-slider-large li{
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
height: 100%;
width: 100%;
}
.ei-slider-large li img{
width: 100%;
}
当浏览器窗口低于图像宽度时:1024px:
@media screen and (max-width : 1023px){
.ei-slider{
width: 100%;
}
}
对于切断我的图像时较小的屏幕:注意我的原始图像是1024x500
@media screen and …推荐指数
解决办法
查看次数
无法获得div背景颜色来填充视口的整个宽度
我正在尝试用背景颜色填充页面的某个部分.我希望背景颜色填充视口的整个宽度,但具有固定的高度.这是我尝试过的:
<div id="theDiv" style="width: 100%; height:200px; background-color:black;">
Blah blah blah, content goes here.
</div>
但无论我尝试什么,这总是在div的两边,div的边缘和视口的边界之间给我一个小的白色边缘.如何使div填充视口的整个宽度？
我不想更改<body>标签的bg颜色,因为我只需要填充屏幕的某个垂直部分.
我唯一能想到的就是我还没有尝试过创建1px宽的bg图像并将其设置为x-repeat ...是不是比这更优雅的解决方案？
推荐指数
解决办法
查看次数
如何将div保持在视口中心
我正在为我的一个项目创建一个反馈系统.我的目标设备是iPad.基本上发生的是通过ajax调用页面的div,它应该覆盖下面的内容.我有那个部分在工作.
我想要做的是将div锁定在视口的中间.我试过position:fixed我的元素,但它会锁定在错误的位置.它似乎以视口的初始位置为中心.如果我向下滚动到较长页面的底部并调用我的反馈窗口,它仍然会在顶部附近.
Ajax页面(在调用页面时运行)
$(document).ready(function(){
$(".popup").css({
top: "50%",
left: "50%",
marginLeft: -$(".popup").width() / 2,
marginTop: -$(".popup").height() / 2
});
});
如果我能找到视口的顶部,我想我能够使这个工作正常.
我调查过:http://www.appelsiini.net/projects/viewport但它并没有真正解决我的问题.
任何有关正确方向的帮助,建议或指示都将不胜感激!谢谢!
推荐指数
解决办法
查看次数
OpenGL子窗口不会同时响应
我有一个问题,我正在使用过剩(openGL实用工具包).我正在主窗口制作一个子窗口.主窗口显示一个简单的图形,子窗口显示另一个视图中的图形.该图旋转,因此应始终重新显示主窗口和子窗口.
但是这两个中只有一个显示旋转的数字.因此,当我启动程序时,主窗口中的图形旋转但在子窗口中它不旋转,它只是静止不动.
当我在子窗口中移动鼠标并按任意键时,角色会发生变化,因此图形在子窗口中旋转并在主窗口中静止不动.
如何让它们同时显示.我按照灯塔的教程,但它没有给我一个答案.我必须对我的视口做些什么吗？
* GLUT Shapes Demo
*
* Written by Nigel Stewart November 2003
*
* This program is test harness for the sphere, cone
* and torus shapes in GLUT.
*
* Spinning wireframe and smooth shaded shapes are
* displayed until the ESC or q key is pressed. The
* number of geometry stacks and slices can be adjusted
* using the + and - keys.
*/
#include <windows.h>
#ifdef __APPLE__
#include <GLUT/glut.h>
#else
#include <GL/glut.h> …推荐指数
解决办法
查看次数
我的网站无法在移动设备上滚动
我找不到在移动设备上启用我网站滚动的方法（在 iOS 8 Safari 和 Chrome 上测试）。它在桌面上完美运行
我使用了 Safari 开发工具包来删除和测试代码的不同部分，结果只有头部标签和正文标签，只有简单的文本，我的网站仍然没有滚动。所以我的猜测是它是在页面加载时发生的。
我的网站可以在这里看到。
推荐指数
解决办法
查看次数
如何摆脱页面的水平滚动
我正在着陆，并将这组规则应用于 body 和 html 元素：
html {
margin: 0px;
height: 100%;
width: 100%;
}
body {
margin: 0px;
min-height: 100%;
width: 100%;
}
此外，所有内容都是视口的：
<meta name="viewport" content="width=device-width, initial-scale=1">
在下面的图片中，您可以看到页面的主要块，它们的宽度都是 100%
然而，我提到的任何内容都没有真正的帮助，尽管页面的块都有 100% 的宽度，有不同的大小，而且还有一个水平滚动条。
我应该怎么做才能摆脱滚动条并使所有块的大小达到当前视口的大小？
推荐指数
解决办法
查看次数
在移动设备上禁用缩放
我正在按照本指南禁用移动设备的缩放。
https://davidwalsh.name/zoom-mobile-browsers
正如许多其他人所建议的那样，该指南建议使用：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--320-->
我已经尝试过这个和视口的几种变体，但我无法让它工作。此外，在查看我遵循的指南中的示例时，我意识到它也不起作用。
https://davidwalsh.name/demo/mobile-viewport.php
关于为什么这不起作用的任何想法以及有关如何使其工作的任何建议将不胜感激！
推荐指数
解决办法
查看次数
为什么标题不以身体边缘为中心？
下面,我将标题固定在顶部,设置width: 100%并应用了body元素的边距margin: 10%.我希望标题保持在视口的100%宽度,但它现在有一个左边距但到达右侧视口的末尾.
* {
box-sizing: border-box;
}
header {
position: fixed;
background-color: #59b1ff;
top: 0;
height: 20px;
width: 100%;
}
body {
margin: 20%;
}
div {
border: 1px solid grey;
}<header>Header</header>
<main>
<div>Div</div>
</main>为什么标题没有附加到左视口边缘？
推荐指数
解决办法
查看次数
定义网页视口的最佳方法是什么？
我习惯于查看我访问的许多网站的代码，并看到以多种不同方式定义的视口。
我见过这个
<meta name="viewport" content="width=device-width, initial-scale=1 " />
和这个
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui" />
和这个
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
和这个
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0 " />
我考虑过将它们全部组合成这样的东西
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
但这有什么好处吗？什么是最好的方法？
推荐指数
解决办法
查看次数