小编Lyn*_*son的帖子
横向模式下iPhone视口高度过大
我是第一次在响应式网站上工作,并注意到iOS7(在iPhone 4s上)Safari中的一个相当不理想的功能.这个问题可能会在操作系统的后续版本中持续存在,我不确定.
问题:正如您在上面的我的gif中看到的那样,视口中没有纵向模式滚动,因为html和body标签的高度100%在CSS 中设置为.你看到的3个div每个都有一个33.33%高度,这意味着它们每个都占据了页面的三分之一.(他们以纵向模式执行)
但是,当视图切换到横向模式并且用户尝试滚动时 - 页面会滚动,就像高度大于视口的100%一样.应该没有滚动,因为所有元素应该恰好构成100%的高度.
据我所知,当点击屏幕时,Safari会自动显示UI控件和地址栏,我的问题是,当UI控件出现时,是否有任何方法可以调整网站大小？或者,当UI控件存在时,是否有任何方法可以适应页面上的所有内容而无需任何滚动？我希望根本没有滚动,就像网站处于纵向模式时一样.
我的测试网站在这里(可能只想在iPhone上查看)
我将我的代码放在下面的代码段中.我不能使用jQuery.谢谢.
html, body{
margin:0; padding:0; width:100%; height:100%; background:#fff;
font-family:Arial; overflow:hidden;
}
p{ margin:0; padding:0; } nav{ height:100%; }
.vCenter{
position:relative; top:50%; -webkit-transform:translateY( -50% );
-ms-transform:translateY( -50% ); transform:translateY( -50% );
}
.option{
margin:0; width:33.33%; height:100%; background:#transparent;
text-align:center; text-transform:uppercase; font-size:110%; cursor:pointer;
-webkit-touch-callout:none; -webkit-user-select:none;
-moz-user-select:none; -ms-user-select:none; user-select:none; float:left;
-webkit-transition: background 0.5s ease, color 0.5s ease, font-size 0.5s ease;
transition: background 0.5s ease, …5
推荐指数
推荐指数
0
解决办法
解决办法
1668
查看次数
查看次数
如何使 div 在其父级内部水平居中，同时溢出父级？
父级具有百分比宽度。我正在寻找一种简单的方法来保持子 div:.wrp位于其父级的中心：.contr即使它溢出父级甚至溢出页面。我尝试过绝对定位，但它在这里似乎不起作用。
例子：
有想法吗？
body {
overflow: hidden;
padding: 5%;
text-align: center;
}
.contr { /* << contr = Container */
width: 40%;
height: 95%;
background-color: #eee;
}
.wrp { /* << wrp = Wrapper */
width: 5rem;
height: 5rem;
margin: auto;
background-color: #bbb;
opacity: 0.75;
}
.expand {
animation-name: expand;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes expand {
50% {
width: 30rem;
}
}<head>
<style>
@import url( 'https://necolas.github.io/normalize.css/latest/normalize.css' );
* {
box-sizing: border-box;
outline: …5
推荐指数
推荐指数
1
解决办法
解决办法
1487
查看次数
查看次数
在源代码中使用 CSS 内容属性和跨多行的文本？
有没有办法让contentCSS 中的属性跨越多行并硬返回？这只是一个偏好问题，但我很好奇，因为我试图避免使用较长的代码行以提高可读性。JavaScript 具有反斜杠方法来跨越字符串多行。有等效的 CSS 吗？
/*/ / / / / / / / / / / / / / / / / / 80 CHARS / / / / / / / / / / / / / / /*/
html:before {
content: 'I generally like to keep my lines of code below 80 characters in length';
}
html:before {
content: 'I generally like to keep my lines of code
below 80 characters in length.';
}最后一条 CSS …
5
推荐指数
推荐指数
1
解决办法
解决办法
1727
查看次数
查看次数
在 JavaScript 中创建随机 SVG 曲线，同时避免急转弯
下面的代码片段在文档上绘制一定次数的随机连接曲线：
function createPath() {
const
dimensions = getWindowDimensions(), svg = document.querySelector( `svg` ),
path = document.createElementNS( `http://www.w3.org/2000/svg`, `path` );
dimensions[0] = dimensions[0]; dimensions[1] = dimensions[1];
svg.appendChild( path );
path.setAttribute(
`d`,
`M ` +
`${getRandomNumber(dimensions[0])} `+`${getRandomNumber(dimensions[1])} `+
`C `+
`${getRandomNumber(dimensions[0])} `+`${getRandomNumber( dimensions[1])}, `+
`${getRandomNumber(dimensions[0])} `+`${getRandomNumber( dimensions[1])}, `+
`${getRandomNumber(dimensions[0])} `+`${getRandomNumber( dimensions[1])} `
)
for( let i = 0; i < 100; i++ ) {
path.setAttribute(
`d`,
path.getAttribute( `d` ) +
`S `+`${getRandomNumber(dimensions[0])} `+`${getRandomNumber(dimensions[1])},`+
`${getRandomNumber(dimensions[0])} `+`${getRandomNumber(dimensions[1])} `
)
}
}
setInterval( setSVGDimensions, 10 …4
推荐指数
推荐指数
1
解决办法
解决办法
1013
查看次数
查看次数
在 JavaScript 中使用父容器包装多个元素的最简单方法
我想将header,main和元素包装在使用 JavaScript 创建的footer容器中。div换句话说，我想插入一个容器 div 作为body元素的直接子元素，但让它包裹所有的body子元素。
@import url( 'https://necolas.github.io/normalize.css/latest/normalize.css' );
::selection {
background-color: #fe0;
color: #444;
}
* {
box-sizing: border-box;
margin: 0;
}
html, body {
height: 100%;
}
header, main, footer {
height: 30%;
margin-bottom: 1%;
background-color: #444;
}
p {
color: #ccc;
text-align: center;
position:relative;
top: 50%;
transform: translateY( -50% );
}
.container {
height: 90%;
padding: 2%;
background-color: #eee;
}<html>
<body>
<header>
<p>header</p>
</header> …3
推荐指数
推荐指数
1
解决办法
解决办法
5247
查看次数
查看次数