相关疑难解决方法(0)

CSS媒体查询仅针对iOS设备

是否有@media查询仅针对iOS运行设备?

例如:

@media (min-device-width:320px) and (max-device-width:768px) {
    #nav {
        yada: yada;
    }
}
Run Code Online (Sandbox Code Playgroud)

这也会改变这些宽度视角的Android设备页面的行为?或者我最后弄错了

css media-queries

90
推荐指数
4
解决办法
11万
查看次数

如何复制在iOS上修复的后台附件

我正在尝试在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背景实现此方法的任何想法?

html css ios

74
推荐指数
1
解决办法
16万
查看次数

背景:修复不重复不在手机上工作

我正在构建一个网页,我希望背景图像可以缩放以适应整个屏幕,保持纵横比并固定(因此,如果向下滚动,背景图像将保持在同一位置).

我已经在桌面浏览器中使用下面的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 safari mobile ios

31
推荐指数
3
解决办法
8万
查看次数

使用背景附件:在ipad上的safari中修复

我正在寻找重建类似于流行科学应用程序的效果.基本上有一个大背景图像,然后有HTML/CSS层.当用户滚动内容时,图像的背景位置应保持原位,而不是滚动.

显然在"常规"浏览器中我会使用background-attachment:fixed,但这似乎不适用于ipad.我知道位置:根据safari规范修复不起作用,但是有没有办法实现这个目标?

css html5 ipad

14
推荐指数
3
解决办法
7万
查看次数

网站JPG在iPad上看起来非常像素化

我们的网站在Mac上显示正常.但是,在iPad上,主页滑块图像看起来非常像素化.

我已经看过[本文] [2]并将JPG更改为渐进式,并清除了服务器缓存和iPad Safari缓存,但问题仍然存在.

帮助赞赏.

safari ipad

8
推荐指数
1
解决办法
123
查看次数

Wordpress Twenty Seventeen Front Page部分滚动效果无法在移动设备上运行

我有一个wordpress网站并使用Twenty Seventeen主题,我喜欢Front Page Sections上的滚动功能,就像在这个演示中一样:

https://2017.wordpress.net/

现在我试图让滚动功能​​在移动设备上工作,但是当我看到CSS时我发现了这个

.background-fixed .panel-image {?    
   background-attachment: fixed;
}
Run Code Online (Sandbox Code Playgroud)

但我知道背景附件在移动设备上效果不佳.有没有人知道一个工作,我发现和在线尝试的一切都不起作用.

css wordpress

7
推荐指数
1
解决办法
1136
查看次数

固定的身体背景与iOS7上的页面滚动

我使用以下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)

干杯

html css background-image

6
推荐指数
1
解决办法
4万
查看次数

固定在ipad上的背景

我无法找到一种方法来正确显示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:滚动.但这并不令人满意.

在此输入图像描述

html css ipad responsive-design

6
推荐指数
1
解决办法
689
查看次数

背景附件:修复在 iOS 上不起作用

我正在尝试找到解决我在 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)

html css iphone ios background-attachment

2
推荐指数
1
解决办法
2万
查看次数