是否有@media查询仅针对iOS运行设备?
例如:
@media (min-device-width:320px) and (max-device-width:768px) {
#nav {
yada: yada;
}
}
Run Code Online (Sandbox Code Playgroud)
这也会改变这些宽度视角的Android设备页面的行为?或者我最后弄错了
我正在尝试在iOS上为学校项目提供固定背景图像div.我一直在用
background-attachment: fixed;
Run Code Online (Sandbox Code Playgroud)
但这导致了移动游猎中的奇怪尺寸和滚动效果.这是我正在使用的网站 ; 我目前用于引用div图像背景的方法在桌面上运行良好但在iOS上完全失败.
不知何故,http: //www.everyonedeservesgreatdesign.com 得到了这个工作.我在跟踪代码时遇到了困难,因为他们正在使用某种类型的方形空间模板,但看起来他们正在将图像放入一个position:fixed以某种方式被position:relative其父div 剪切的div中.我的印象是不可能position:fixed用视口以外的任何东西来剪切div,所以我很好奇这里发生了什么.
关于如何在我的网站中为固定图像div背景实现此方法的任何想法?
我正在构建一个网页,我希望背景图像可以缩放以适应整个屏幕,保持纵横比并固定(因此,如果向下滚动,背景图像将保持在同一位置).
我已经在桌面浏览器中使用下面的CSS实现了这一点,但它无法在iPhone或iPad上运行.在这些设备上,背景太大(它继续在折叠下方),如果向下滚动得足够远,图像将开始重复.任何人都有修复?谢谢!
HTML {
background: url(photos/2452.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Run Code Online (Sandbox Code Playgroud) 我正在寻找重建类似于流行科学应用程序的效果.基本上有一个大背景图像,然后有HTML/CSS层.当用户滚动内容时,图像的背景位置应保持原位,而不是滚动.
显然在"常规"浏览器中我会使用background-attachment:fixed,但这似乎不适用于ipad.我知道位置:根据safari规范修复不起作用,但是有没有办法实现这个目标?
我们的网站在Mac上显示正常.但是,在iPad上,主页滑块图像看起来非常像素化.
我已经看过[本文] [2]并将JPG更改为渐进式,并清除了服务器缓存和iPad Safari缓存,但问题仍然存在.
帮助赞赏.
我有一个wordpress网站并使用Twenty Seventeen主题,我喜欢Front Page Sections上的滚动功能,就像在这个演示中一样:
现在我试图让滚动功能在移动设备上工作,但是当我看到CSS时我发现了这个
.background-fixed .panel-image {?
background-attachment: fixed;
}
Run Code Online (Sandbox Code Playgroud)
但我知道背景附件在移动设备上效果不佳.有没有人知道一个工作,我发现和在线尝试的一切都不起作用.
我使用以下CSS来固定固定的身体背景.除了新的iOS7之外,它几乎适用于所有浏览器.在后者上,背景不再固定.它随页面滚动.知道如何解决这个问题吗?
body
{
background-color: #000;
background-image: url('../pics/backgrounds/blackWhite.jpg');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Run Code Online (Sandbox Code Playgroud)
干杯
我无法找到一种方法来正确显示iPad上单页网站的背景图像.
我在视口中有固定的背景,页面在背景上滚动.页面结构如下:
<body class="landing-1-b">
<div class="container">
<section class="intro viewportheight_min" id="intro" class="currentSection">
...
</section>
<section class="keys viewportheight_min" id="keys">
</section>
....
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
而css是:
body, html, .container, section {
height: 100%;
margin:0;
font-family: "FuturaStd-Light", "sans-serif";
}
html {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Run Code Online (Sandbox Code Playgroud)
这可以在桌面浏览器上完美地工作,就像你在网站boardlineapp.com上一样,但它在ipad上不起作用:背景奇怪地缩放,你可以在下面的iPad屏幕截图中看到.你能帮我解决这个问题吗?
谢谢
PS:有是部分答案在这里与背景attachement:滚动.但这并不令人满意.

我正在尝试找到解决我在 iOS 设备上使用固定背景的问题的方法。我宁愿不必为这个网站重新设计所有东西,我希望一些 CSS 更改可以解决它。这就是网站在 iPhone 上的样子,这也是它应该有的样子。我使用的 CSS 代码如下:
.container {
min-width: 320px;
max-width: 480px;
margin: 0 auto;
}
.fixed-background {
height: 800px;
-webkit-backgound-size: cover;
-o-backgound-size: cover;
-moz-backgound-size: cover;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
text-align: center;
overflow: auto;
}
Run Code Online (Sandbox Code Playgroud)
我还尝试使用@media查询来修复它,使用 stackoverflow 上的一些帖子,但这似乎没有任何效果:
@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) {
.fixed-background {
background-attachment: scroll;
}
}
Run Code Online (Sandbox Code Playgroud)
HTML
<div class="fixed-background bg-1">
<div class="container">
<div class="title">
<h1>ROOK PROPERTY<br>MANAGEMENT INC.</h1>
<h2>CONDOMINIUM MANAGEMENT</h2>
</div>
</div> …Run Code Online (Sandbox Code Playgroud)