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?
Related
I defined CSS transition rules in my svg. It's something like:
#mark #bg {
transition: fill 200ms;
fill: #245575;
}
#mark:hover #bg {
fill: #ff5c26;
}
When I drag it into browser's blank page and test it, the transition works fine. But if I embed the svg into my website using <img src="images/mark.svg" alt="">, the transition doesn't work.
Did I miss something?
Images either via <img> tags of via the CSS background-image image property cannot be interactive and have other restrictions in order to maintain user's privacy and security.
If you ask yourself "could I do this if the image was a .png or a .gif?" then you'll be on the right lines. Browsers have deliberately chosen to keep to the same mental model for SVG files so that the capability of images is easy to understand.
If you want transitions to work you'll need to use an <object> or <iframe> tag or embed the SVG inline in the html document.
I want to build a website that looks exactly the same across all screen width's, which means the whole website will scale according to the screen's, or more accurately, the viewport's width.
This is relatively easy to do for SVG images and I have all images correctly scaling according to the viewport's width. The viewport's width is the point of reference, from which all images scale. However, the point of reference for the text is different between any desktop browser and the iPhone's Safari (and I assume any mobile browser).
According to my research there seem to be two possible reasons for different sized text: a difference in the default CSS's or a difference in the rendering engines. Since I can't find any reference to pixel sized text on Chrome's default CSS or Firefox's default CSS, I assume this setting comes from the rendering engine.
My IP is dynamic so I can't provide a live example, but here are the screens comparing the same site in iPhone's Safari and Chrome on the desktop. Notice the huge difference in the size of the text.
Is there any way I can make the text have the same relative size in both these browsers?
I found the answer in JavaScript:
onresize=onload=function(){
document.body.style.fontSize=window.innerWidth/20+"px"
}
which sets the text size according to the viewport's width on the body element. Since all the text set in em's is sized in relation to their parents, all the text is sized correctly from the body element.
Furthermore, if you want to avoid the cascading hell by using rems and respect the original layout design from a let's say 1024px width you can stick with this:
onresize = onload = function(){
document.querySelector("html").style.fontSize = ( innerWidth * 100 ) / 1024 + "%";
}
You should try CSS Unit vw, like this:
body { font-size: 1.5vw; }
However, i am not sure it is supported by mobile browsers...
EDIT
Check for browser compatibility here.
Using phantomjs, is there a way to control the DPI setting used when rasterizing an image of the web content using the page.render(filename) method?
I can't find anything that would control this via the interface api, but didn't know if someone has already figured out a way to do this.
Our business-case looks like this:
Custom HTML content created via a web application is fed to our rasterize.js phantom process and is queried for a specific tag to set the client rectangle.
This client rectangle is rendered to a PNG of the HTML that can then be used as an image elsewhere.
We want the resolution of the resulting PNG to be something higher than the default, due to aliasing on the text at some odd font sizes/bold combinations.
I may be mixing up DPI with something else, but have you looked into the zoomFactor option? Setting that on the page object will cause the rendered image to zoomed.
This fork allows setting the dpi https://github.com/martonw/phantomjs/tree/issue-%2313553
You can set then the dpi with page.dpi = 72
console.log('Loading a web page');
var page = require('webpage').create();
var url = 'http://phantomjs.org/';
page.open(url, function (status) {
//Page is loaded!
page.dpi=300; // this is where you actually set the DPI
page.render("test.pdf");
phantom.exit();
});
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;
}
}
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];
}