Articles of css3

CSS3线性渐变不适用于android。

这里有新手问题,但出于某种原因,我无法弄清楚这一点。 我有以下CSS在我的iPhone上工作正常但不是我的Android。 通过使用android查看jQuery Mobile演示,我知道它可以处理背景渐变。 谢谢 .mydiv { background: -moz-linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE; background: -webkit-linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE; background: linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE; }

如何在移动设备上的CSS或Javascript中平滑地设置animation高度

我正在为移动设备开发HTML5 Web应用程序,并且在animation流畅的情况下遇到了一些麻烦。 基本上,当用户点击按钮时,抽屉(高度为0px的div)应该animation到给定高度(以像素为单位),并且内容将附加到该抽屉。 如果你有一个Pinterest帐户,你可以在http://m.pinterest.com上看到现在的animation(点击评论或列表按钮)。 不幸的问题是,在移动设备上,Webkit Transitions不是硬件加速的高度属性,因此它极其滞后,animation也是锯齿状的。 以下是一些代码段: HTML :… Comment … CSS : .comment_wrapper { -webkit-transition: all 0.4s ease-in-out, height 0.4s ease-in-out; position: relative; overflow: hidden; width: 100%; float: left; height: 0; } .comment { background: #f4eeee; margin-left: -10px; padding: 10px; height: 100%; width: 100%; float: left; } Javascript (使用jQuery): function showSheet(button, wrapper, height) { […]

Android浏览器textarea滚动遍布整个地方,无法使用

所以我构建了一个漂亮,shiny的HTML5应用程序,针对移动Safari和Android的默认浏览器。 我正在测试它的Android版本是2.1和2.2。 我的应用程序在其中一个页面上有一个textarea,而且这个textarea有时会包含大量文本。 它基本上是一个自由forms的写作领域。 这在iOS中可以正常工作。 然而,在Android上,当你输入时,屏幕会在每次击键时上下滚动,通常你无法看到你输入时输入的是什么,并且你会从所有的跳跃中感到头晕目眩。 此外,如果文本区域内的内容超过其高度,则似乎无法在其中滚动。 甚至不让我开始横向模式。 上述问题在那里更加明显。 这感觉就像Android的一个错误,因为我的textarea真的没什么特别的。 我把它剥离到了基本要素,它的行为也一样。 想知道是否有其他人在Android上使用他们的textareas有这么多的乐趣,可能会给出一些建议,或者至少是同情? 谷歌似乎已经成功地在Android的Gmail网络界面中解决了这个问题。 我猜测有一些JS魔法在继续,因为我的标记/ CSS是相同的。

如何获取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偏移以某种方式指的是所有三个选项卡占用的空间,因此包装器滑动就足够了没有任何标签可见。 […]