Articles of css

将CSS注入到android中的webview网站

例如,我想将www.google.com的背景颜色更改为red 。 我使用了webview ,我的style.css文件在assest folder 。 我想将此style.css文件注入www.google.com 。 我的代码出了什么问题? 请为我写正确的代码。 谢谢。 我的MainActitviy.java文件: package com.example.mysina; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.webkit.WebView; public class MainActivity extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); WebView webView = new WebView(this); setContentView(webView); String html = ” src: url(‘file:///android_asset/style.css’)”; webView.loadData(html, “text/html”, “utf-8”); webView.loadUrl(“https://www.google.com”); } […]

适用于Android的chrome中的模糊SVG图像

为了逃避手机中不同像素密度的地狱,我在我的CSS中使用SVG文件作为背景图像。 Chrome for android似乎渲染inline-svg就好了,但是如果svg失败了 用于background-image和普通url的CSS 用于带有background-image和数据uri的css 与image元素一起使用 android 4的股票浏览器工作得很好。 (以及我试过的所有其他手机) 你可以访问这个小提琴并检查出来。 放大以查看差异。 任何人都知道为什么chrome在这里使用了一些预先渲染的位图?

如何模拟:在非链接元素上的android中的活动css伪类?

我希望能够模仿Android webkit中所有元素的:active伪类的行为。 目前, :active语法仅适用于元素(链接)。 我正在处理的应用程序中几乎所有可操作元素都不是标准链接标记。 iOS webkit支持:active对所有元素都:active 。 /* works on both android iOS webkit */ a:active { color: blue; } /* works on iOS webkit, does not work on android webkit */ div:active { color: red; } 我find了一些解决类似问题的资源[1,2],但它们都有点沉重,我想知道是否有一个重量较轻的解决方案我无法find。 http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone http://code.google.com/intl/ro-RO/mobile/articles/fast_buttons.html

如何让我的固定宽度移动网站始终显示“完全放大”?

如何让我的固定宽度网站始终在webkit(iphone和android)浏览器上“完全放大”? 现在,它在iPhone上看起来很好,在具有更高分辨率的Android手机上“太小/缩小”。 我正在尝试这个视口:

移动网络 – 禁用长按/轻敲文本选择

我已经看到/听到了所有关于用user-select的变体来禁用文本user-select ,但是没有一个能解决我遇到的问题。 在Android上(我假设在iPhone上),如果你点击并保持文本,它会突出显示它并带来一些标志来拖动和选择文本。 我需要禁用它们(见图): 我试过-webkit-touch-callout无济于事,甚至试过像$(‘body’).on(‘select’,function(e){e.preventDefault();return;}); 无济于事。 和::selection:rgba(0,0,0,0);等廉价技巧::selection:rgba(0,0,0,0); 也不会工作,因为隐藏这些也无济于事 – 选择仍然会发生并且会破坏用户界面。 另外我猜这些旗帜仍然存在。 任何想法都会很棒。 谢谢!

Javascript界面​​不能与android 4.2一起使用

我正面临着一个严重的android OS Jelly Bean 4.2的错误,在我的程序中,我使用JavaScript来获取网页的高度,它完全适用于Android 2.2到4.1但是当我尝试在android 4.2中使用相同的代码时JavaScript界面​​无法正常工作。 我该如何解决这个问题?

Android Webkit:绝对定位的元素不尊重z-index

令人讨厌的小虫子,这个。 如Android票证6721所示 ,当绝对定位的元素位于或标记的顶部时,Android浏览器似乎不尊重z-index。 我迫切需要任何解决方法。 以前有人征服过这个吗? 提前致谢!

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浏览器的一般行为? 如何解决这个问题?

如何为移动设备扩展网站?

我有一个非常简单的静态网页(只有css和链接,没有脚本)。 它在android和iphone上看起来不错,但太小了。 我猜他们把它放小了,因为它适用于大多数网站。 我怎样才能覆盖它并使他看起来像我想要的那样?

background-attachment:固定干扰背景大小

我有一个缩放的背景图像以适应其容器内部,当Modernizr检测到浏览器不支持背景大小时,我有适当的后备(未显示)。 .wrap { width: 200px; height: 116px; position: absolute; background-image: url(image.jpg); background-attachment: fixed; background-position: 0 0; background-size: 200px 116px; background-repeat: no-repeat; } 这是一个例子: http : //jsfiddle.net/crowjonah/6xYNm/ 它在Chrome,Firefox,Safari(桌面和iOS)中看起来很漂亮,但是我在某些Android实例上遇到了麻烦。 这是一个正确显示的设备的UA: Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Xoom Build/IMM76L) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30 这是一个没有的设备的UA: Mozilla/5.0 (Linux; U; Android 4.2.2; en-us; sdk Build/JB_MR1.1) AppleWebKit/534.30 (KHTML, like Gecko) […]