I'm trying to run my test using xolvio:webdriver but it looks like default screen resolution is mobile.
How to set a desktop resolution for the webdriver?
P.S. We're using PhantomJs using wdio.getGhostDriver.
browser.
init(). // be sure to call init first
setViewportSize({
width: 1280,
height: 1024
}).
PhantomJS by default has a low resolution.
Related
I developed an extension for Firefox with an option popup for preferences.
On mobile, as it doesn't open as a popup but as a new tab moz-extension://(...)/popup.html, I had to apply some specific CSS media queries.
But as you can see below, it's definitely not working.
What should I do ?
CSS page is here https://github.com/ANN-MB/LEIA/blob/master/extension%20firefox/leia.css
I solved the problem.
It wasn't about media queries but because my manifest.json looked like this :
"options_ui": {
"page": "config.html",
"browser_style": false,
"open_in_tab": true
}
It seems that when open_in_tab is set to true, the Firefox Mobile Browser opens the option page with the desktop display (don't ask me why).
So turning "open_in_tab" to false gave me the good render.
But you need #media querys for wanted solutions! Your Medium is provide an max range of size, you only need is to declare your style on diffents sizeranges:
#media(min-width:XXXpx) {
// your style here
}
for more information take a look at this: https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
I'm very new to TVML and web development. I'm trying to use the tv-placeholder style tv to set a default image for an img
It works when I use the size configuration:
width: 520; height: 280;
However, It does not with the custom size
width: 1235; height: 314
I can advice you to implement your own TVML-item that will be used as an image with a custom placeholder (also, you will be able to implement cache policy). Read more about the TVMLKit. I think you will need to inherit TVImageElement class and override some methods. You will be able to use any images with any resolutions from any sources (local storage and other).
How can I make screen size qualifiers for CSS files. Like app.css but for certain screen size like 10" tablets. If it's possible, can I also make Android specific like app.minWH720.android.css. It seems not to work, am I doing something wrong or is only xml supported.
I want to archive different label sizes on different devices. XML file are fine without touching them.
I'm aware of documentations like: https://www.nativescript.org/blog/details/supporting-multiple-screen-resolutions-in-your-nativescript-app
Considering that you have screen qualifers pages like
main-page.minWH720.xml
main-page.minWH480.xml
You can simply provide different CSS classes for your XML elements.
.myButton-minWH720 {
background-color: red
}
.myButton-minWH480 {
background-color: blue
}
And use them accordingly where needed..
As for the second question you can get your metrics using the platform module like this in your app.js
var platform = require("platform");
var screen = platform.screen;
console.log(screen.mainScreen.heightDIPs);
console.log(screen.mainScreen.heightPixels);
console.log(screen.mainScreen.scale);
console.log(screen.mainScreen.widthDIPs);
console.log(screen.mainScreen.widthPixels);
var device = platform.device;
console.log(device.os);
console.log(device.manufacturer);
console.log(device.osVersion);
console.log(device.model);
console.log(device.sdkVersion);
console.log(device.deviceType);
console.log(device.uuid);
console.log(device.language);
console.log(device.region);
This is my website http://kaybs.in/Medical/index.html, my problem is how to set a default resolution for this webpage to look same in all monitors,how to fix the css ?
maybe it help you
body {
max-width: 1000px;
}
Seeing your website try reading media queries and set your image(carousel) for a max-width so it doesn't get stretched.
Try reading this:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
http://mediaqueri.es/
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
I'm trying to get styles applied to a page only when the page is projected on the wall (by a projector, when someone is giving a presentation). As the moment, I can only get this in Opera in fullscreen mode.
Is there any way to get #media projection to take affect in other browsers? Also, is there a way to make it only apply to the projection, and not the laptop its projecting from?
If not, are there any viable workarounds to this? I am trying to create a slideshow in css, but also offer a "presenter view" with extra controls on the laptop of the presenter.
Any help in any surrounding area is much appreciated.
#media projection is an abstract concept. Practically projection can be 'on' only on devices of special kind with custom browser builds.
On desktop/laptop with projector attached as an external monitor there is no way for the browser to know what kind of additional monitor is used (if any) for viewing.
The only option for you is to put <button>"Fullscreen" mode</button> and to use something like:
$(button).click( function() { $(document.body).toggleClass("fullscreen") } );
And use styles:
body { ... }
body.fullsceen { ... }
If the projector's output is a different resolution than your laptop monitor, you can use a CSS media query to control the display of an extra element inside each slide, with notes for the presenter.
For example, let's say the laptop is 1024x768, the projected screen is 1280x800, and the notes are inside an element with the class name "notes" -- you'd do something like this:
.slide > .notes
{
display:none;
}
#media projection and (width:1280px)
{
.slide > .notes
{
display:block;
}
}
It would still require the projector and the laptop to be different screens (like using two monitors), but with that as a given, it totally works -- I've done this for real.
I use Opera in fullscreen mode whenever I give presentations; I also use a Mac OS X app called "Mira", which allows you to configure the Apple Remote so it sends keystrokes to applications. So mapping the "Fwd" and "Back" keys on the remote to "page-up" and "page-down" in Opera, I can use the remote to step-through the slides :-D