Articles of css3

如何获取webkit-column-count值和当前页面或列Id?

我在android中使用webview开发应用程序。 我正在将页面加载到webview中并使用CSS3 webkit属性动态拆分多个列。 一旦用户到达最后一页/列,我必须显示TOC确认对话框。 任何人都可以请教我如何做到这一点? height:600px; -webkit-column-width:600px; -webkit-column-count:auto;

媒体查询在Android上的行为不符合预期

我有4个媒体查询。 第1,第3和第4工作,但第2工作似乎没有激活。 为什么480×720(第二个媒体查询)默认为第一个媒体查询? @media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} } @media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} } @media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} } @media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} } 预期结果: 实际发生了什么: […]

PhoneGap – 键盘使三星Galaxy Tab 10.1上的屏幕变黑并闪烁一段时间

我正在使用PhoneGap使用HTML5和CSS3开发移动应用程序。 我的问题是每当我触摸在三星Galaxy Tab 10.1(Android v3.1)上运行的网页上的文本框时,它会显示键盘但页面会变黑并持续一秒钟。 有时,它闪烁一段时间显示黑色背景,然后恢复自己。 我甚至尝试使用单个input type=”text”的简单页面,它甚至会发生相同的情况。 任何人都面临类似的问题,并已解决它? 任何帮助深表感谢。 谢谢。 更新1: 正如我上面所说,黑色闪烁甚至发生在包含带有单个文本框的简单页面的应用程序中。 以下是代码: Flickering Problem html, body{ -webkit-backface-visibility: hidden; overflow: hidden; -webkit-transform: translate3d(0,0,0); } 我在我的Android平板电脑上进行了测试,闪烁与完整的网页一样。 我尝试在SO上添加某些CSS属性,因为类似的问题声称要解决,但确实有帮助。 值得注意的是,每当我们尝试在文本框中输入任何文本时都会发生黑色闪烁,而我目前没有使用CSS3进行任何animation/过渡。

在Android上禁用标注(上下文菜单)

在Web应用程序中,我需要禁用移动浏览器在触摸目标(例如或链接)上触摸并按住(“长按”)时显示的默认标注。 我已经在使用-webkit-touch-callout: none; 这在iPhone和iPad上运行良好,但似乎不适用于Android(在Android 4.4上测试过)。 来自W3邮件列表的这篇文章建议在Javascript中为“contextmenu”事件添加一个监听器并调用e.preventDefault() 。 这似乎也不起作用。 有什么建议么?

Android浏览器忽略响应式网页设计

我刚开始转换我的网站有’响应式网页设计’。 我安装了Firefox的“Web Developer”插件( http://chrispederick.com/work/web-developer/ )来检查它是否正常工作。 一切都很好看。 现在我用我的Android手机尝试了这个。 我在纵向模式下无法正常工作……我在手机上跟踪了@ media-selectorserror handling的问题: 此页面( https://worldtalk.de/m/test.php )生成一个CSS,输出浏览器使用的高度/宽度和设备高度/宽度+方向作为参数。 我得到了以下结果: 肖像,800×1200 风景,800×400 方向是正确的,两个方向的宽度/高度和设备宽度/高度相同。 但该设备(HTC Desire Z)仅使用错误的屏幕分辨率(800×1200)进行纵向模式。 我想避免使用带有用户代理的设备数据库或类似的东西。 附加信息: 浏览器版本:WebKit / 533.1 Android 2.3.3 / Sense 2.1 HTC Desire Z(T-Mobile固件) JavaScript报告相同的屏幕分辨率 问题: 这只是我的手机型号还是Android浏览器的一般行为? 如何解决这个问题?

如何在Android原生浏览器中调试CSS?

我正在使用Cordova for Android构建混合应用程序。 HTML5 / CSS3可通过适用于桌面的Chrome和适用于Android的Chrome正常呈现。 但是,通过Cordova,HTML5 / CSS3使用本机浏览器(名为“Internet”的应用程序)呈现。 CSS解释似乎有一些麻烦。 Firefox有Firebug,Chrome有一个开发人员面板,可在桌面上进行远程调试。 您是否知道我可以使用任何类似的工具来有效地调试CSS移动本机浏览器?

在Android上强制正确的CSS3转换百分比解释

tl;博士 ? 获取以下链接中演示的机制,以在Android Chrome和默认浏览器上使用GPU加速。 更新2 (2014-01-13 13:25:30Z):根据bref.it下面的评论,截至Android 4.4 KitKat报告的行为是固定的 – 但我下面描述的修复现在打破了它! 索德定律。 更新1 (2012-11-01 17:54:09Z):从转换元素的计算样式报告的变换矩阵可以推断出有缺陷的行为,它返回一个像素值。 我将尝试为此编写一个Modernizr测试,以便为任何可能的解决方案铺平道路。 我开发了一种滑动容器的机制,以显示全宽,水平排列的子部分。 滑动标签,基本上。 因为有很多性能密集的东西和精心设计的Javascript,我希望将JS保持在最低限度,并尽可能多地使用CSS中的纯粹风格。 我认为我做得很好,考虑到 – JS只是改变了包装器的一个属性: (左) http://jsfiddle.net/barney/VPJuq/ (移动设备可以附加/显示/显示这些小提琴url以自行查看结果) 关于这是如何工作的一句话:将标签视为inline-block s允许我指定white-space: nowrap (最后几条规则中的其余代码基本上折叠了标签之间的空白)并允许它们水平堆叠没有清除/返回,一直保持其父级的全宽。 从那里开始,为包装器设置负的左偏移就可以了。 很酷,对吧? 现在,一点上下文:我正在开发的接口是在本机移动应用程序中运行 – 应用程序的核心function依赖于尖端的移动专用技术(不要问 – NDA) – 通过UIWebView,而且是唯一的目前支持该技术的平台是Android。 在这里,我的问题是双重的: transform: translate工作a / lot / smoother( translate3d甚至更多)比left或margin-left过渡,到一个非常可取的点,边缘线至关重要 – 特别是在Android上,看作非翻译在拥有最新操作系统的最新手机上,过渡仍然令人窒息。 考虑到这一点,问题的关键在于Android在与translate相关时似乎推断出盒子模型的不同。 为了演示,这里是基于transform的同一件事的版本,它与前一个小提琴做同样的事情,适用于支持translate3d的所有浏览器…… (带翻译) http://jsfiddle.net/barney/EJ7ve 如果你在iPhone上检查这个(再次,通过追加/show ),你会注意到iPhone上的帧率有所提高。 对于在Android上运行的Firefox也是如此,可以说在Chrome和Android上的默认浏览器上也是如此,除了在这里,-100%的translateX偏移以某种方式指的是所有三个选项卡占用的空间,因此包装器滑动就足够了没有任何标签可见。 […]

Android Webview是否支持CSS3 WebKitanimation?

Android操作系统上的WebView控件是否支持硬件加速的css3animation? 所有的webkit css(例如:-webkit-transition bla bla)我已经在Safari Mobile上工作了,他们在android上的工作方式是一样的吗?

border-radius在现代原生Android浏览器中不起作用

我有一个使用border-radius的页面。 它不会在原生Android浏览器中四舍五入; 它显示与方angular。 它显示在桌面的Chrome浏览器,IE浏览器,FF等四舍五入罚款,但不是在本机手机浏览器。 有谁知道这是否是浏览器本身的问题,一些额外的CSS扩展,我不使用等? 这是我的CSS(在演示中): .bigButton2 { width: 320px; height: 200px; margin: auto; padding: 20px; background-color: #521c0b; color: #FFFFFF; border: 3px solid #e3b21e; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; } 我build立了一个JSFiddle: http : //jsfiddle.net/VJvQA/ 我已经尝试过填充,没有填充,没有箱子大小,没有箱子大小,它只是显示为尖angular。 任何帮助或见解,将不胜感激。 我意识到已经有人发布了这个( border-radius样式在android浏览器中不起作用 ),但是他没有提供任何代码,JSFiddle,并且没有任何真正的答案而被错误地回答了一个普通的问题。 如果可能的话,我会冷静下来,但是我认为,写一个真正写得好的问题会更好。 谢谢!

css3转换rotate3d与透视不工作在Android上

我有一个使用3D转换的Web应用程序,它可以在Android 4.1的Android浏览器中正常运行。 但是,PhoneGap容器中的相同应用程序导致挤压和展开animation,而不是透视3D旋转。 有没有办法让它在PhoneGap中运行,或者是否使用了不能进行3D转换的不同渲染引擎? 我用 -webkit-perspective: 300; 在父母和 -webkit-transform: rotate3d(0, 1, 0, -180deg); -webkit-transform-style: preserve-3d; 在旋转的图像上。