草庐IT

Viewport

全部标签

html - iOS 8.3 - 低于 1.0 的元视口(viewport)初始比例导致方向变化时奇怪的内容缩放

将我的iOS设备升级到iOS8.3后,我注意到元视口(viewport)初始缩放属性有一些奇怪的行为。如果我将初始比例设置为1.0以下并在浏览网页时旋转我的设备,整个内容将逐渐变小,最终浏览器会崩溃。我注意到每次方向变化时内容变小的数量与您设置的初始比例有关。例如,如果我将它设置为0.9,每次内容都会缩小10%。如果我将它设置为0.6,每次内容都会缩小40%。由于这个bug的性质,无法在jsfiddle上转换和体验。相反,我会将代码粘贴到此处,以便您可以在某处自行测试:initialscaleunder1.0Hello,runthispageoniOS8.3deviceandchang

javascript - 当 float 元素在视口(viewport)之外时,如何获取它的左偏移量?

这是我的情况。我创建了几个并排堆叠的面板,它们被包裹在一个主容器中。每个面板采用100%的视口(viewport)宽度和高度。我的目标是当我点击它们各自的链接时能够水平滚动到每个面板。使用纯css方法效果很好。但是,我正在学习jQuery,我希望使用.scrollTo()方法来实现这一点。当面板一层一层堆叠(即垂直)时,我能够获得每个面板的顶部偏移量并很好地滚动到它们的位置。对于水平变化,我很难获得面板的左偏移量。我得到所有这些的左偏移量为零。如果我的逻辑是正确的,比如说视口(viewport)是1920px宽,第二个面板的左偏移应该是1920px,第三个是3840px等等。根据我目前

javascript - 当 float 元素在视口(viewport)之外时,如何获取它的左偏移量?

这是我的情况。我创建了几个并排堆叠的面板,它们被包裹在一个主容器中。每个面板采用100%的视口(viewport)宽度和高度。我的目标是当我点击它们各自的链接时能够水平滚动到每个面板。使用纯css方法效果很好。但是,我正在学习jQuery,我希望使用.scrollTo()方法来实现这一点。当面板一层一层堆叠(即垂直)时,我能够获得每个面板的顶部偏移量并很好地滚动到它们的位置。对于水平变化,我很难获得面板的左偏移量。我得到所有这些的左偏移量为零。如果我的逻辑是正确的,比如说视口(viewport)是1920px宽,第二个面板的左偏移应该是1920px,第三个是3840px等等。根据我目前

html - 即使在缩放时,如何在移动浏览器上获得流畅的换行符?

即使在缩放时,如何在移动浏览器上实现流畅的换行?我有一个非常简单的网页,只有一栏文本。以下是CSS的相关部分:/*✂----------------*/body{/*Toavoidproblemswithsomeolderbrowsers,thatdonotcalculate*relativevaluescorrectlywithoutthisstatement.*/font-size:100%;/*✂----------------*//*Centerthecontentandleaveamarginattheleftandattheright.*/margin-left:auto;

html - 即使在缩放时,如何在移动浏览器上获得流畅的换行符?

即使在缩放时,如何在移动浏览器上实现流畅的换行?我有一个非常简单的网页,只有一栏文本。以下是CSS的相关部分:/*✂----------------*/body{/*Toavoidproblemswithsomeolderbrowsers,thatdonotcalculate*relativevaluescorrectlywithoutthisstatement.*/font-size:100%;/*✂----------------*//*Centerthecontentandleaveamarginattheleftandattheright.*/margin-left:auto;

html - Flexbox 元素离开浏览器窗口

我在构建网站时遇到了一个问题;就是有些元素超出了屏幕。以下是演示问题的简单代码。在这里,id为name-h的div是消失的元素:html,body{width:100%;height:100%;}#container{display:flex;flex-direction:column;justify-content:center;align-content:center;height:100%;}#name-h{font-size:34px;margin-bottom:450px;}FirstNmaeLastNameResumePortfolioBlog这个问题的原因是什么?我该如何

html - Flexbox 元素离开浏览器窗口

我在构建网站时遇到了一个问题;就是有些元素超出了屏幕。以下是演示问题的简单代码。在这里,id为name-h的div是消失的元素:html,body{width:100%;height:100%;}#container{display:flex;flex-direction:column;justify-content:center;align-content:center;height:100%;}#name-h{font-size:34px;margin-bottom:450px;}FirstNmaeLastNameResumePortfolioBlog这个问题的原因是什么?我该如何

javascript - 从视口(viewport)中心展开 div

我之前有一个问题想expandadivfromthecenterofthebody.它工作正常,直到我遇到这种情况,其中正文的内容足够长,现在可以显示滚动条。关于此的通知jsFiddle当我滚动到底部或刚滚动到一半然后单击页面上的任意位置时,展开的div会显示在页面的最顶部。我知道下面这段CSS代码与它有关:.growme{background-color:#990000;height:0;width:0;position:absolute;filter:alpha(opacity=0);opacity:0;top:0;left:0;bottom:0;right:0;margin:au

javascript - 从视口(viewport)中心展开 div

我之前有一个问题想expandadivfromthecenterofthebody.它工作正常,直到我遇到这种情况,其中正文的内容足够长,现在可以显示滚动条。关于此的通知jsFiddle当我滚动到底部或刚滚动到一半然后单击页面上的任意位置时,展开的div会显示在页面的最顶部。我知道下面这段CSS代码与它有关:.growme{background-color:#990000;height:0;width:0;position:absolute;filter:alpha(opacity=0);opacity:0;top:0;left:0;bottom:0;right:0;margin:au

css - 视口(viewport)宽度导致背景无法按预期显示

我遇到了一个问题,当视口(viewport)缩小到小于为我的某些元素指定的尺寸时,背景颜色会出现意外行为。虽然滚动条显示正确,但背景不是我所期望的。当视口(viewport)与预期一样大或更大时,背景会按预期运行。当用Firebug检查页面元素时,似乎body元素没有拉伸(stretch),即使它里面的内容是。是什么导致背景出现这种行为?我已经提供了我认为相关的html和CSS,但如果我遗漏了什么,请告诉我。缩小视口(viewport)示例放大的视口(viewport)示例CSShtml{background:#A37C45;}body{background:#55688Aurl(".