Tag: css

iOS Web App触摸手势: 我search了整个networking，find一个简单的方法添加触摸手势到一个简单的button。基本上我试图find一个简单的方法来获取后退button（通常在iOS设备顶部的任务栏上看到的）按下时，将CSS类从“正常”状态更改为“已按下”状态。虽然我对Javascript很陌生，但我更喜欢使用标准的DOM方法而不是jQuery（或任何其他库）。任何人都有一些完整的代码，并解释JavaScript代码如何读取ontouchstart和ontouchend事件，以及如何使用这些函数来更改CSS类？任何帮助将不胜感激！ TC

Safari CSS字体颜色问题: 我在MacBook，iPhone和iPad上Safari浏览器中的字体颜色有问题。禁用元素变成灰色，我希望它保持原来的颜色黑色。在Firefox和铬的结果是好的。这是我的CSS代码： input[disabled], textarea[disabled], select[disabled='disabled']{ color: #000000 !important; } 我也尝试使用颜色名称，但他的结果是一样的。谢谢你的帮助！

iOS浏览器 – 使用JavaScript更改CSS或内容时，iFrame跳转到顶部: 这个问题似乎一直存在下去。在某些特定的情况下，iOS浏览器会出现这个令人沮丧的错误。问题：如果您有一个包含iFrame的网页，并且您正在以编程方式修改iFrames内容文档，则iFrame将跳转到页面的顶部。但是，只有在DOM操作之前的页面超过某个高度时，才会发生这种情况，通常情况下，这个长度大于视口长度的两倍。无论您是修改DOM结构还是更改样式属性，都会出现此问题。这个错误只在iOS上出现，包括截至目前的最新版本（9.2）

使用video作为离子/cordova为iOS的背景: 我需要同时播放6个video作为背景，但在IOS和ANDROID平台。我正在开发一个离子应用程序。我发现了一个可以和networking完美结合的解决scheme ，但是当我build立起来的时候，它的工作方式就像我所想的那样：我用作背景的每个video都是以全屏模式播放的。这里有一些代码： .bg-vid { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: 100%;; z-index: -100; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: url(http://www.w3schools.com/tags/movie.mp4) no-repeat; background-size: cover; } <div> <video autoplay muted loop class="bg-vid"> <source src="http://www.w3schools.com/tags/movie.mp4" type="video/webm"> <source src="http://www.w3schools.com/tags/movie.mp4" […]

hover的CSSdynamic导航 – 如何让它在iOS Safari中工作？: 在我的网站中，我只使用了CSS的dynamic菜单。这在桌面浏览器中很好，但在iOS（iphone，ipad等）上却不行，因为触摸界面不支持:hoverselect器。我的问题是：在iOS上支持这个最好的方法是什么？（理想情况下，通过修补一些CSS，或使现有的代码工作，而不是整个事情只是为了支持iOS的Javascript）我的html看起来像这样 <ul id="nav"> <li> Item 1 <ul> <li><a href=''>sub nav 1.1</a></li> <li><a href=''>sub nav 1.2</a></li> </ul> </li> <li> Item 2 <ul> <li><a href=''>sub nav 2.1</a></li> <li><a href=''>sub nav 2.2</a></li> </ul> </li> <li> Item 3 <ul> <li><a href=''>sub nav 3.1</a></li> <li><a href=''>sub nav 3.2</a></li> </ul> </li> </ul> 而CSS就是这样 #nav li { […]

iOS 10 Safari：防止在固定覆盖后面滚动并保持滚动位置: 我无法防止主体内容滚动，而固定的位置覆盖显示。类似的问题已经被多次提出，但是以前的所有技术似乎都不适用于iOS 10中的Safari。这似乎是最近的一个问题。一些说明：我可以禁用滚动，如果我设置html和body overflow: hidden ，但是，这使得身体内容滚动到顶部。如果叠加层中的内容足够长以便可以滚动，则主页内容的滚动function将被正确禁用。如果叠加中的内容不足以导致滚动，则可以滚动主页面内容。我join了一个来自http://blog.christoffer.me/six-things-i-learnt-about-ios-safaris-rubber-band-scrolling/的javascript函数，当覆盖图显示时禁用touchmove 。这工作以前，但不再有效。这里是完整的HTML源代码。您可以在http://www.pixeldigital.com/test/ios_scroll.html进行testing。 <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { font-family: arial; } #overlay { display: none; position: fixed; z-index: 9999; left: […]

当iPad纵向时，缩小移动Safari浏览端口的宽度？: 我正在devise一个在iPad上以横向模式浏览时效果最佳的网站。一切都在一个1024像素宽的<div>容器中。不过，我仍然需要缩小视口，所以当用户将iPad转为纵向时，用户不必缩小或水平滚动即可查看页面上的所有内容。目前我的<head>有<meta>标签： <meta name="viewport" content="width=1024px, initial-scale=1.0, maximum-scale=10.0" /> 在横向模式下查看页面时，一切正常显示，但是我无法获得上述所需的纵向行为。我尝试将initial-scale改为0.75 ，而恰恰相反：所有内容都适合纵向模式，但iPad处于横向模式时会有额外的水平空间。有什么CSS，Javascript或特殊的视口设置，我可以用它来得到这个工作？ PS我不能使用user-scalable=no 。

当在iOS 11的webview中向下滚动时，固定标题消失: 我有一个本地的iOS应用程序与Web视图来显示Web内容。我有一个固定的头在我的应用程序具有以下属性： #header { height: 60px; background-color: @mainColor; color: #ffffff; padding: 10px; text-align: center; position: fixed; width: 100%; z-index: 1; } 在我升级到iOS 11之前，一切正常。现在，当我向下滚动/滚动页面时，标题消失，当滚动完成时，标题再次出现。这也可以在Xcode 8中复制。

Iphone在长按造成一些矩形放大镜popup: 每当我长时间按任何视图/屏幕，都会popup一些矩形的放大镜。查看图片获取更多信息点击查看矩形放大镜无论我在哪里按住屏幕，每次都出现在特定的区域。我想禁用矩形放大镜，我已经尝试在CSS中的以下代码： -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; 但它不会被禁用。这里是一个video，所以你可以有更多关于这个问题的信息：

修复了iOS中某个网站（div）的背景: 我想有一个固定的位置背景图像，只覆盖整个屏幕的一部分我的网站（实际上是两个部分，但独立，所以没有区别）。我在该部分的容器DIV上使用此CSS： #wrapper { background-image: url(../img/bg1_IMG_1509.jpg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } （注意：我使用的是单独的属性，而不是简单的background希望这可以与更多的设备和浏览器兼容，但似乎不是这样。）这在所有的桌面和浏览器中，以及在android上的一些浏览器上或多或less地工作，但在iOS中完全不起作用。在iOS中，背景不仅被滚动，而且还被垂直拉伸，使得背景图像的高度覆盖整个DIV，其在移动设备上具有很多内容并变得相当高，导致看到更多或在屏幕上放弃的像素更less。所以，既不fixed也不cover工作。我知道/已经阅读了iOS的固定位置解决scheme的答案，该解决scheme在<body>标签中使用了position: fixed的DIV和全屏背景图片。但是我不想在整个机构上这样做，而只是在两个（独立的）部分，在这种情况下，解决方法是不能使用的。