I am trying to add some conditional css for device detecting, because of some conflicts in desktop and android tablet landscape res
- if android_device?
:css
#media only screen and (max-width : 1280px) and (-webkit-device-pixel-ratio:2) {
/*CSS*/
}
can any one help me out where I have to use this check?
I got this reference from this url:
URL
There is no way of detecting an operating system or web browser using strictly CSS.
I'd recommend using Javascript to detect the web browser / operating system, and attach classes to the <body> of the page accordingly.
You can then write CSS specific to each use case, which will only be honored if that particular criteria is encountered.
Here is an example on jsFiddle.
There is actually a nice way I found useful which is to use conditional media queries in your HTML as follows:
<html>
<head>
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
</head>
</html>
I believe it solves your problem
Source: github.com/googlesamples/web-fundamentals
Following code is invalid css:
- if android_device?
:css
If you want to write specific styles for desktop and android devices then:
1) you can directly include desktop styles without any media query in css.
2)Styles which ar specific to android device can be included in between media queries as
#media only screen and (min-device-width : 480px) and (max-device-width : 800px) {
/*CSS */
}
Related
I have a HTML code as:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test page</title>
<style>
.hint {width:510px;}
#media only screen and (max-device-width: 720px) {
.hint {width:280px}
}
#media only screen and (max-device-width: 720px) and (orientation: landscape){
.hint {width:350px}
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div class="hint">just a test
<script>alert($(window).width()); alert($('.hint').css('width'));</script>
</div>
</body>
</html>
It works fine on all iOS devices but behaves weird for some Android devices like Samsung Galaxy Note 4 as I can reproduce the issue.
For the default browser, it works fine. The alert result is 980px and 280px but for some browsers like UC browser, it's 510px.
Is there anything wrong with my media query code?
Thanks for any kind of tips!
You should take a look at how "Twitter Bootstrap" outlines their media query structure at http://getbootstrap.com/css/#grid-media-queries
Try comparing those with your own written media query structure, and if you are still stuck, you should check out Chris' written media query set at https://stackoverflow.com/a/21437955/4069464
Hope this helps!
Note: If after you have setup all the proper media query sets, and somehow this is still not working for the UC browser, then you probably have to read out in detail on how UC browser defines their mobile screen size (possibly they might have defined themselves a different set of definition of screen sizes)
I'm developing an android app using cordova.
The index.html has the following:
<!DOCTYPE html>
<html>
<head>
<title>Mobile</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" media="all" href="/style.css">
...
My problems concerns the link tag. Although logcat output shows the embedhttp server serving up the style.css, the styles don't get applied to the html.
In contrast, the js files I include, seem to be working perfectly fine.
<body>
<script type="text/javascript" src="/cordova.js"></script>
<script type="text/javascript" src="/lib/jquery-2.1.0.min.js"></script>
...
Has anyone else run into this issue?
I was experiencing the same problem and I solved writing the path to the images relative to css file location and not relative to .HTML file location.
I have the following structure:
css
index.css
images
mage1.png
index.html
My css class, declared inside índex.css file, must be like this one:
body {
background: url('../images/image1.png');
}
What you have to be aware of is that cordova counts relative paths differently than your normal browser. So I would recommend not using relative paths for images but use the absolute path from the project "home". Ex:
body {
background: url('images/image1.png');
}
This worked for me as I needed to keep a functioning version for a webapp as well as for a cordova nativified app.
I made a simple application in Intel XDK.
When I was testing the application I noticed that they enabled the accelerometer.
For this application it's needed to have only 1 position.
How can I disable the accelerometer?
Thanks in advance.
Its not accelerometer that is causing, its the device orientation that needs to fixed.
Call this API to fix the orientation: intel.xdk.device.setRotateOrientation(ORIENTATION); after intel.xdk.device.ready has fired.
Full documentation is here
Portrait: intel.xdk.device.setRotateOrientation("portrait");
Landscape: intel.xdk.device.setRotateOrientation("landscape");
Both: intel.xdk.device.setRotateOrientation("any");
Below is sample code:
<!DOCTYPE html>
<html>
<head>
<title>XDK</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<script src="intelxdk.js"></script>
<script>
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
function onDeviceReady(){
// set orientation
intel.xdk.device.setRotateOrientation('landscape');
// intel.xdk.device.setRotateOrientation('portrait');
// intel.xdk.device.setRotateOrientation('any');
intel.xdk.device.hideSplashScreen();
}
</script>
<style>
body {font-family:arial;background-color:white}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>Locked to Landscape</p>
</body>
</html>
That is possible do it the way next:
Go the project properties.
Build Settings
Orientation
You select, landscape or portrait.
If you emule the project, you see the changes.
use the setRotateOrientation-Method:
To lock the device in portrait mode, use:
intel.xdk.device.setRotateOrientation("portrait");
Works on Android as well as iOS.
See: Documentation
Easier is to go to Build Settings -> Your Platform -> Orientation. That very fast and simple.
As per the FAQ, its possible to use a Kendo UI widget in a mobile application. I tried this by including references to these js scripts:
jquery-1.7.1.js
kendo.core.js
kendo.fx.js
kendo.popup.js
kendo.calendar.js
kendo.datepicker.js
and initialized it using:
$("#datePicker").kendoDatePicker();
but it never gets rendered correctly. Am I missing something? Any help is appreciated.
Yo
I am not sure what you might miss - here you can see all the JavaScript dependencies.
Also make sure you have added the CSS files.
<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.mobile.all.min.css" rel="stylesheet" />
It might sound funny but did u create a kendo Application object(u have'nt mentioned that u did in your question), if u did not, create a kendo application object, something like -
var application = new kendo.mobile.Application($(document).body, { transition:"slide" });
I'm trying to access the data inside the assets/css from an external HTML file.
The process goes like this:
<html>
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, height=device-height, user-scalable=yes" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ola</title>
<link rel="stylesheet" type="text/css" href="file:///android_asset/css/main.css" />
<link rel="stylesheet" type="text/css" href="file:///android_asset/css/sch.css" />
<script type="text/javascript" src="file:///android_asset/css/ethan.js" />
<script type="text/javascript" src="scripts/allinone.js" />
</head>
<body>
<input id="btnTest1" name="button" type="button" style="height:0px;width:0px;" />
</body>
</html>
So here the thing is that, I'm actually calling the HTML file using a link (since the HTML file is not locally present). But main.css, sch.css and ethan.js are locally present in the assets/css folder.
What I'm trying to do is to load the allinone.js which is obviously external and the other three files into the which are internal and run the script.
I found "file:///android_asset/css/main.css" but it looks like it doesn't work.
Please help....
I would be curious to know more about the use case here. My understanding is this:
You're loading an externally hosted HTML file into an Android Webview
You need to overlay some local styles/scripts, which can't be hosted on the external site along with the HTML (presumably because you're generating them dynamically).
If that's so -- and given that the logical approach you conceived of using the file:// URI does not work -- there would seem to be two options, each making use of the webView API:
Load the HTML file from the remote source, modify it, then set it as the webView's source. Locate the tag of the remote HTML and inject your local JS / CSS inline there.
Make use of the 'loadUrl' WebView method to inject your CSS/Javascript dynamically (this seems unnecessarily complicated if #1 is an option). For example:
mWebView.loadUrl("javascript:injectJavascript(js)");
where the parameter 'js' is some inline Javascript that you load within your Android code, and injectJavascript is a method in the remote HTML file that actually inserts it into your DOM. Take an analogous approach to insert your CSS ...
Admittedly these approaches are a bit hackish. Ideally you would use a custom method of the WebView class like 'addCssToDom' or something, but as far as I can see, no such methods are available.