Tag: css

Cordova / Phonegap找不到的资产: 我刚刚将我的HTML5应用程序移植到Phonegap，那是因为我有一个HTML5应用程序，并将其包含在Phonegap需要的结构中。我在index.html中引用了css / js文件，如下所示： <link rel="stylesheet" href="css/app.css"> <script src="js/app.js"></script> 当我运行“phonegap服务”的网站运行良好，就像以前一样 – 它find所有的文件。当我运行“phonegap运行ios”应用程序加载在我的设备上，但没有JS或CSS。在Safari中检查应用程序显示资源的URL是，例如file：/// css / app.css。为什么当我为项目提供服务而不是在设备上？

媒体查询不适用于iPhone和iPad: 在iPhone 5和iPad 4 OS的情况下@media查询不起作用。我已经使用下面的CSS为每个操作系统和设备造型为不同的屏幕。我明确地检查了我的iPad和iPhone的宽度和高度，并基于这一点，我只保留了媒体查询。这在ANDROID OS上工作正常。 /*@media print {*/ /* iPhone 5 (Portrait) */ @media screen and (max-device-height: 568px) and (orientation: portrait) { #map_canvas { border: 1px dashed #C0C0C0; width: 290px; height: 473px; } } /* iPad 4 (Portrait) */ @media screen and (max-device-height: 1024px) and (orientation: portrait) { #map_canvas { border: […]

为什么触摸事件监听器似乎阻止iPhone或iPad上谷歌翻译语言的select？: 我有一个与谷歌翻译部件的问题。当使用iPhone或iPad时，我无法select要翻译的语言。我可以点击第一个button，但是当语言菜单出现时，我点击一种语言，菜单立即消失，点击注册在菜单后面的元素上。这个问题只发生在我将在下面概述的非常具体的情况下。下面描述的问题已经在iphone4 ios5.0.1和ipad2 ios 7.0.6上观察到。在firefox 29.0.1，chrome 31.0.1650.63 m或者Internet Explorer 11上没有发现问题。 JSfiddle的问题在http://jsfiddle.net/LfkLy/1/ Reveal.js不需要重新创build这个问题。我首先注意到了这个问题，当我在一个页面上使用了这个小部件时，reveal.js经过大量的游戏后，我发现如果在reveal.jsconfiguration中将touch设置为false或者在下面注释掉了这些行，应该有。 dom.wrapper.addEventListener( 'touchstart', onTouchStart, false ); dom.wrapper.addEventListener( 'touchmove', onTouchMove, false ); dom.wrapper.addEventListener( 'touchend', onTouchEnd, false ); 我决定删除reveal.js触摸事件，并实施我自己的使用hammer.js和锤子jquery插件。我用过这样的东西 // hammer.js $('.reveal').hammer().on("tap", function() { console.log("tapped with a hammer"); }); 一旦上面的代码被执行，问题再次发生。我修改了代码，只用了hammer.js就得到了相同的结果。无论我将触摸侦听器附加到的页面的哪一部分都发生了问题。为了好奇的缘故，我用jquery试了一遍，又得到了同样的结果。 //Test with jquery $('.reveal').on("touchstart", function() { console.log("touched […]

关注input时，在iOS中忽略了固定/绝对定位: 我正在用Phonegap构build一个应用程序，我有一个标题，我已经固定在视口的顶部。 header { position: fixed; top: 0; width: 100%; height: 30px; background-color: red; z-index: 100; } 除了当我点击一个input字段并且键盘向上滑动时，这个按照我想要的方式工作。然后定位被完全丢弃。标题在可见的视图外面向上滑动。再次closures键盘后，它将返回到原来的位置。我读过一些手机浏览器不关心定位和绝对位置，以确保一个可能的小屏幕没有被固定的元素覆盖。这是真的？有没有解决的办法？我已经尝试将input焦点时的标题设置为绝对。我在这里读了一下， http://dansajin.com/2012/12/07/fix-position-fixed/ 。但是，它似乎并没有为我工作。感谢任何帮助。干杯

解决“背景附件：固定”，这是不适用于iOS4: 我努力获得固定的背景图像的网页，所以当页面在UIWebView中滚动时图像不会移动。我发现的是： background-attachment: fixed在iOS4中不起作用（使用4.2.1）。要仔细检查，我已经准备好了一个页面（下面的代码片段），在<head>部分，这个页面可以在Safari和Firefox的Mac上正常工作，但是在iPhone的Safari浏览器中却没有这样做。你有什么build议作为实现预期成果的解决方法？我已经使我的UIWebView半透明，并添加了UIImageView，所以我可以通过半透明的页面看到“固定的背景图像”。不幸的是，当我滚动结束/开始边缘时，我可以看到UIWebView边框。是否有任何官方的苹果资源/网页，说明background-attachment: fixed没有实施iOS4？干杯! PS上面提到的代码片段： <style type="text/css"> body { background: #ffffff url('image.jpg') fixed no-repeat; background-attachment: fixed; } </style>

HTML unicode箭头适用于Safari桌面，但不适用于iOS的Safari: 我正在使用页面上的❯箭头，并且在OS X上的Chrome，Firefox和Safari上正确呈现，但是在iOS（iPhone）上的Safari中，箭头呈现为空框（您知道，“无法呈现”框）。任何想法，为什么发生这种情况，我可以做些什么来解决它？谢谢！编辑：其实，如果有人能够提供更好的解决scheme（尽pipe我意识到这可能是不可能的），我将不胜感激…我不想@ font-face或@import之一，不值得额外的资源压力三个箭头…有没有箭头unicode，将与iOS的Safari的工作，有人可以链接我？也许是一个画廊？

背景图像在iOS中不能正确显示: 我在网站上使用了一个可以打印的背景图片。该网站在所有桌面浏览器中都很棒，但是当我在iPad Mini（运行iOS 6.1.3）上查看网站时，背景图片中有条纹。您可以在大多数页面上看到一个图案（背景图片的大小），看起来很好，然后再次看到相同大小的背景图片等等。以下是显示问题的屏幕截图：这是背景所需的CSS： #wrap { margin:0 auto; position:relative; padding:0; background: #B3B1B2 url(/images/bgs/parchment2.jpg); } 我试图清除iPad的caching，但没有奏效。为什么会发生这种情况，我感到不知所措。我如何预防和解决这个问题？更新我创build了一个jsFiddle的包装。它在网站上看起来不错。所以我只能假定它在我的代码中。但是，这并不总是立即发生在网站上。这可能发生在小提琴，但我没有看到它发生。如果这是我的网站我如何跟踪导致问题的代码？更新2 我改变了背景图像的html, body标签和问题仍然发生，但没有那么糟糕，将自己清除。我仍然想知道如何一起阻止这个问题。更新3 我尝试了@Freezebreaker的切换到PNG的想法。这没有奏效。我仍然看到线。它也大大增加了背景文件（从30k到几乎200k）。我也尝试了一个完全不同的背景图像，认为它可能是图像本身，但我仍然看到了错误。为了考虑文件大小，我切换回了jpg。我如何解决这个问题？这是一个iOS问题或在我的代码中的东西？有问题的网站是http://www.lfrieling.com/ 。我只能在运行iOS 6.1.3的iPad Mini上看到这一点（本文最新）。我没有看到我的iPhone运行相同版本的iOS上的这个。你也可以在长页面看到比其他页面更多的内容。请参阅专家>资源。

UIWebView中的字体大小不符合iOS字体大小: 这是一个说“关于”的UILabel。在iOS中精确设置为17.7。在它下面还有一个UIWebView，它也说“关于”。也使用css精确设置为17.7。他们不匹配。如何正确解决这个问题？奇怪的是，在苹果自己的UIWebView，大小的基础是不同的？ Html来testing… <html><head> <style type='text/css'> body { margin: 0px; font-family: 'SourceSansPro-Light'; font-size: FONTPOINTSpt; } html { -webkit-text-size-adjust:none; } </style></head> <body leftmargin=0 topmargin=0> About </body></html> 行为在设备或模拟器上是相同的。（注意，从这里我知道这个比例是72.0 / 96.0。）

用javascript加载不同的CSS样式表: 我需要使用JavaScript来加载一个不同的样式表基于正在传递的URLvariables。情景是这样的：我们需要维护一个具有一个CSS样式表的移动网站，以及一个不同的样式表，当它通过在iOS应用程序中加载的web视图访问时，将用于样式化相同的页面。如果你看www.blog.meetcody.com，你会发现我们已经在使用媒体查询和响应式网页devise了。这对我们来说是不够的原因是因为媒体查询无法检测到该页面是通过本地应用程序中的webview加载还是移动Safari浏览器。我们需要分别处理这两种情况。博客是托pipe的WordPress博客，我们正在通过我们的iOS应用程序中的JSON API访问。我们处理这个的方式如下：当网页通过我们的iOS应用程序加载时，我们在URL的末尾添加一个variables“/？app = true”。我想要做的是检查URL是否包含此string，如果是，请使用其他webview。我正试图用下面的代码做到这一点： <script language="javascript" type="text/javascript"> if(window.location.href.indexOf('/?app=true') > -1) { document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"http://blog.meetcody.com/wp-content/themes/standard/appstyle.css\" />"); } document.close(); </script> 我遇到的问题是，当app = true是URL的一部分时，上面的代码实际上并没有加载appstyle.css样式表。如果你看看http://blog.meetcody.com/wp-content/themes/standard/appstyle.css?ver=3.4.2你可以看到我正在testing这个设置背景：黑色body {}标记 body { background: black; } 而在style.css中http://blog.meetcody.com/wp-content/themes/standard/style.css?ver=3.4.2身体背景色是＃F2F0EB; 在body {}标记中 body { background: #F2F0EB; } 当然，我们想做的不仅仅是改变背景颜色，但我只是把它作为一个例子。有没有更好的方法来做到这一点，或者是我的代码有什么问题吗？也许我不能直接链接到appstyle.css javascipt中的href？非常感谢。圣诞快乐！

如何在离子中使用图像作为button: 我的目标是使用图像作为离子button。我第一次使用a-tag链接页面。但是当我点击图片。没有button激活的效果。所以我切换到button标签我曾尝试使用 <button class="button button-clear" style="background-image:url('img/myImage.jpg'); background-size:cover"></button> 但button高度保持不变。所以它不会显示全尺寸的图像。我努力了 style="font-size:100px;" 和 style="line-height:100px;" 但似乎没有任何工作。我也尝试添加我自己的CSS .Test-up { border :none; padding : 0px; } .Test-down { opacity: 0.5; border:0px; padding: 0px; } 并在下面的代码添加到我的index.html <button ng-mousedown="class='Test-down'" ng-mouseup="class='Test-up'" class="{{class}}" href="#"> 和下面的代码到我的控制器 $scope.class = "Test-up"; 因为我尝试从http://codepen.io/Leiron/pen/ztawA但它不适用于iOS或Android。所以我该怎么做？