I have applied body-background color(ex:blue) to my page. But when i open this page in tablets, mobile devices the color should change to orange color. when i resize my pc browser window the colors wont be change. Is it possible?
You can change the width by changing the CSS tag; but that changes across all devices.
#media only screen and (max-device-width: 1440px) {
To determine if its a tablet or what device the user is using specifically you can use Javascript to determine the device. Then load CSS accordingly.
You can look at the code here; [link]http://davidwalsh.name/detect-ipad[/link]
The problem with that is there is thousands of devices out there. So you'll have to check for each device.
// For use within normal web clients
var isiPad = navigator.userAgent.match(/iPad/i) != null;
// For use within iPad developer UIWebView
// Thanks to Andrew Hedges!
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);
Have you attempted a CSS3 Media Query; as posted below?
/*Common Tablet Width*/
#media only screen and (max-device-width: 1024px) {
body{
background-color:blue;
}
}
Related
I'm using Bootstrap MVC and have a 3 column layout for the index page for a internal blog. Small left hand column which shows pics, blogs in the middle and useful widget in the small right column.
When you view the site on a mobile device it all moves as it should but I would like the left column to move after the main blog column only for a mobile device. Is this possible I found the push and pull commands but it dosnt do it for just mobiles?
Cheers
What I would do is either use the default media queries in your own css files. These are the ones that bootstrap uses:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
or depending on your layout you may want different break points. You would just either use id's for those columns or add classes to get the behavior that you want.
Hope it helps!
I'm using chrome API and Default Media Receiver. Is it possible to use some parameters to display media on a portrait screen?
Or this in the browser window:
javascript:document.body.style.setProperty("-webkit-transform", "rotate(90deg)", null);
you could do something like this:
body.portrait {
-webkit-transform: rotate(90deg);
}
and then add the portrait class to the <body> via javascript with a cast message
Default receiver maintains the aspect ratio; if you have an image that its height is more than its width, it will be shown as such. Are you experiencing something different?
I'm playing YouTube videos in my app - the app is Portrait only except that I'd like to have the videos play Landscape. I'm using the much publicized WebView method:
public YouTubeViewer(string url, RectangleF frame)
{
string youTubeVideoHTML = #"<object width=""{1}"" height=""{2}""><param name=""movie""
value=""{0}""></param><embed
src=""{0}"" type=""application/x-shockwave-flash""
width=""{1}"" height=""{2}""</embed></object>";
string html = string.Format(youTubeVideoHTML, url, frame.Size.Width, frame.Size.Height);
this.LoadHtmlString(html, null);
this.Frame = frame;
}
This works great except that the MoviePlayer is in Portrait orientation only. I've tried calling the WebView from within a new ViewController that supports ALL orientations, but it has no effect. I've tried rotating the WebView, but that does not affect the MoviePlayer that is magically called by the iOS.
Any help would be much appreciated.
Thanks,
Rick
The app info.plist was set to only allow Portrait orientation. Changed that and the YouTube controller correctly rotates the MoviePlayer!
I have an Android mobile app created with jQuery Mobile and PhoneGap. I would like to have 3 separate layouts depending on device and orientation:
Portrait phone - on smartphones I want to use always portrait layout
Portrait tablet - different than on phone
Landscape tablet
Is this possible to achieve with CSS media queries? I know changing layouts is possible, but not sure how to force portrait layout only for smartphones and at the same time allow landscape for tablets.
Most of the devices would come under the following 3 resolutions
1) HVGA-Half of VGA (320 x 240) 2) WVGA- wide VGA(800x 480) - nearly 1.5 times of HVGA 3) HVGA 2x- (640 X 960) - IPHONE 4 uses this resolution
for your requirements
1) & 2) you can write your styles inside #media as below. you can use HVGA or WVGA. Change width and height as per your need
#Media screen and (min-width: 320px) and (max-width: 480px){
/* css files here*/
}
3)For a landscape view use orientation:landscape like in below example
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape){
/* css files here */
}
The code piece is just for your reference . Your needs may be different, Please change parameters like screen/only ,min-device-pixel-ratio, max-device-pixel-ratio etc as per your needs
I have parsed html content to display in a webview.
There are phone numbers which are detected by webview by default, but those links are displayed in blue color, I want to change it to white color, how is it possible?
If anyone know please tell me..
Thanks in advance.
According to this question all you need to do is to set the a (hyperlink) CSS properties. See the answer of David Thomas. Specifically, he proposes this solution for just phone URLs:
a[href^=tel] { /* css */ }
You can change style color of your html content on server side or in client side.
For doing it from client side you must get first the elementId or class of your html content (you can do it from chrome with right mouse click on the link and selecting inspect element)
Then on your uiwebview (once it finished being loaded) you execute javascript for changing element color:
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString *javascripString = [NSString stringWithFormat:#"document.getElementById(\"linkId\").style.color=\"white\";", m_studyId];
[uiwebview stringByEvaluatingJavaScriptFromString:javascripString];
}
The iPhone uses the current color setting in the a:link property. It uses that value even if the phone number is plain text and not enclosed with the hyperlink tag. If no CSS definition is set, iPhone uses the default. For those who may not know, you can set the values like this.
<head>
<style>
a:link {
color:#FFCC14;
text-decoration:underline;
}
</style>
</head>
If you do not have a CSS style setting for hyperlink then add it or Change the color to the color that works best for your webpage.
Try DarkDust solution. From client side it would be something like that:
- (void)webViewDidFinishLoad:(UIWebView *)webView{
NSString *javascripString = [NSString stringWithFormat:#"document.createElement('meta');meta.name='format-detection';meta.content='telephone=no';document.getElementsByTagName('head')[0].appendChild(meta);"];
[webView stringByEvaluatingJavaScriptFromString:javascripString];
}