While browsing the web, I need to fake my screen resolution to websites I'm viewing but keep my viewport the same (Chrome's or FF's emulating doesn't solve my problem).
For instance, if I go to http://www.whatismyscreenresolution.com/ from a browser in full screen mode which has 1920x1080px resolution I want that site to think I am using 1024x728px but still be able to browse in full screen mode.
One of my guessess is I need to override js variables screen.width and screen.height somehow (or get rid of js completely but the particular site won't work with js disabled), but how? And would that be enough?
It's for anonymous purposes I hope I don't need to explain in detail. I need to look as one device even though I am accessing the site from various devices (Tor browser not an option - changes IP). The browser I'm using is firefox 30.0 and it runs on VPS (Xubuntu 14.04) I'm connecting to remotely.
This thread (Spoof JS Objects) brought me close but not quite enough, it remains unanswered. I've struggeled upon this question for quite a long time so any recommedation is highly appreciated!
The site you provided uses the following Javascript to determine which width/height values to show:
height = screen.height;
width = screen.width;
res = document.getElementById ('resolutionNumber');
res.innerHTML = width + " X " + height;
If all you care about is ensuring that these values change, you can do the following before their code is executed:
screen = new function() { this.width = 1; this.height = 2 }
If you care about other attributes of the screen object, you'll need some extra Javascript to preserve those.
To see this in action, load their page, then use Firefox or Chrome dev tools to put a debugger in their Javascript (line 116, where it says height = screen.height;), execute the above override, then press play!
If you want to do this for every page you visit, you'll need to incorporate this into a Chrome or Firefox Extension (I've made custom Chrome extensions, super easy).
Found a way, with firefox.
Go to the desired website
Access the tool by going to Tools -> Developer -> Responsive Web Design
Enter the resolution you preferred, then refresh the current tab, the website will reload the site according to the screen resolution you've set
Related
My last question was closed for some reasons (Chrome Inspector not even 1% accurate to real mobile devices)
However as it seems the problem was related to the DPR. I will attach images to show my problem
Chrome/Firefox Inspector with DPR 2.0 for Iphone 6/7/8:
Real Iphone 6:
I can not simulate the DPR on any website on any browser on my pc or my friends pc. It will always scale like 1. Doesnt matter if I use DPR 1,2 or 3.
So my questions is how to successfully simulate DPR 2.0?
I guess the problem is DPR or is it something else?
First of all the bigger text was my bad, my iphone got bigger text set that was the reason why the text was different. However the core of this topic is still the same and the resolution is different to chrome inspector and real devices. However mostly because of the browser taskbars.
As it seems no browser related inspector solution is working. However even when some people said it is not possible to emulate real devices it´s actually possible and also by google itself with android studio:
https://developer.android.com/studio
You can use any android version and create any resolution you want. You can also test localhost from your host os inside of your emulated smartphone browser by using this instead of the default localhost/127.0.0.1:
10.0.2.2
You can also open inspector of your emulated device from your main os! By using:
chrome://inspect/#devices
And here is starting the real question. Why does this inspector window clone the correct device resolution from the emulated device? I mean it´s literally the default chrome inspector window again. Very confusing.
They even clone the menubar, even when it´s now showing, the resolution and everything else was cloned 1to1 compared to the android studio emulator.
However I guess it´s more realtime streaming than actually cloning.
That´s to the point it´s not possible..
Also maybe very nice to know that you can use the fullscreen API to dodge problems with those annoying browser taskbars which crash your ui and take space. You can use this code to enter fullscreen with user gesture:
<button id="goFS">Go fullscreen</button>
<script>
$("#goFS").on("click",function(){
// this works with scroll - do not use document.body.requestFullscreen();
const elem = document.documentElement;
if (elem.requestFullscreen) {elem.requestFullscreen()}
if(document.fullscreenElement){
console.log('fullscreen detected');
}
});
</script>
In fact it´s really sad that you have to download android developer software just to emulate real display solutions as web designer. I hope google will build in this technology in future inside of their chrome inspector.
Also I guess apple is providing the same software for their ios app development. So you should be able to emulate iphones their too. However as far as I read you must use a MAC machine for this.
Hope this will help anybody.
I am trying to make my website accessible in high-contrast mode. In order to detect when high-contrast mode is enabled, I created a JavaScript method to detect if background images are disabled, because high-contrast mode disables background images. Then if the browser is in high-contrast mode, I append a CSS file to make fixes for displaying in high contrast. This works fine in Firefox, Edge, and IE, but Chrome uses its own extension to create high-contrast, and it does not disable the background images, so in Chrome the CSS for high contrast is not appended.
From searching I have found that Chrome adds a filter over the website as opposed to enabling/disabling/changing the website colors or images themselves. I have searched and searched, but I can't find anything to test to check if Chrome is using high-contrast mode. If there were a way to detect which extensions are being used that would also solve the problem, but I haven't been able to find a way to do that either.
My code actually works fine, all I need is to be able to detect the high-contrast mode in Chrome. Here is the method I use to check for high-contrast mode.
let highContrast = (options) => {
let hcDetect = jQuery(`<div id="jQHighContrastDetect"></div>`).css('background', 'url(../uploads/c-wht-small.png)');
hcDetect.appendTo(document.body);
if (hcDetect.css('background-image') === 'none') {
$('head').append('<link rel="stylesheet" href="../css/highcontrast.min.css" type="text/css" media="all">');
}
}
If you are asking about Windows High Contrast Mode, Chrome does not know when that is active.
In general, if a Windows user has chosen to enable High Contrast Mode, then that user is surfing in Microsoft Internet Explorer or Microsoft Edge (as these browsers support it). Both of them support the proprietary -ms-high-contrast #media rule.
Checking for a missing background image is a tactic that would work in IE/Edge, but using the media query is a better approach. Especially since Windows High Contrast Mode will soon allow background images in Edge.
If you are looking to detect when a particular extension has set its own high contrast mode in Chrome, it would be helpful to know which extension.
For example, with the High Contrast extension you can look for the following attributes on the <html> tag: hc="a3" and hcx="3" (the values may be different for you, but the attributes should match). If you open the browser dev tools you can see some other things it does. but those attributes are at the highest level of the DOM and probably safest to use.
If you are asking about Chrome for Android, that is also a different process.
...all I need is to be able to detect the high-contrast mode in Chrome
Solution #1:
In my React/TypeScript project, I used code similar to #Wesley Abbenhuis's answer, but found I didn't need the timeout for my component that took seconds to load. In fact, I created a demo React project that tested for the extension in the first loading component, and no delay was necessary.
const htmlTag: HTMLElement = document.getElementsByTagName(
'html'
)[0];
const isUsingChromeHighContrastExtension: boolean =
htmlTag.getAttribute('hc') !== null;
Solution #2:
Make your non-high contrast code accessible, and you shouldn't have to detect Chrome's high contrast extension in the first place.
From the WCAG Criterion 1.4.11: Non-text Contrast:
Success Criterion 1.4.11 Non-text Contrast (Level AA): The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
User Interface Components
Visual information used to indicate states and boundaries of user interface components, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
Graphical Objects
Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
The Chrome Extension will inject some code to generate a highcontrast LAF.
The setTimeout could be required duo to the injection. In my case it was required.
This worked for me:
setTimeout(function(){
var htmlTag = document.getElementsByTagName('html');
console.log(htmlTag[0].getAttribute('hc') != null);
}, 150);
I am doing a web application. While trying to open the webiste on UC mini browser in data saving mode from my mobile device the css styles are not getting compiled.Is there any way to debug?
Thanks in advance.
There are no very good ways to debug it. UCMini (or UCWeb in light speed mode) is a remote proxy browser. As far I know, there is no debug console for it. The only thing you can do is throw JavaScript alert()s to try and debug various JS breakage issues.
But if you are concerned about a very weird layout. Keep in mind that you will never see a normal CSS in those modes. UCMini is not a normal browser. It's a Firefox 10 proxy engine that will shrink your content into a single column, in a similar way Opera Mini does in single column view mode.
A couple good other helpful things to know about that browser's context:
The target screen size is 800x600. So in portrait, it shrinks it all to approximately 600px (in one column), and 800px in landscape. And due to the Firefox 3-10(ish) engine, CSS support is limited.
I could say about our experience (FareCompare.com). Nodejs consoles + Frontend (Dojo) alerts. That's all we could find for our few bugs.
P.S. Pay attention that UC is working in one page mode. As far as I know, it is impossible to open new tab there. window.open() works the same as location.replace( url ).
I'm having a problem with http://taxlienagents.com/ and how it is displaying in Google Chrome. When I open the site in Google Chrome, the center Tab Area seems to cover the main text above it. If you take a look at http://img651.imageshack.us/img651/8869/taxliensite.jpg, you should be able to see what I am talking about versus when opening the site in FireFox. When I debug the site in Chrome the height is automatically set to 58px for some reason, however in FireFox it is set to 397px. I am using
setHeight : function (el) {
if (this.options.autoHeight)
this.$content_container.stop(true, true).animate({
height : this.getHeight(el)
}, this.options.animSpeed * 2 / 3, this.options.animation);
},
to get the height. I've gotten the site to be as XHTML 1.0 Transitional Compliant as I could, however I am not the original developer and I know that the site has some problems.
Well, first you should've mentioned that this is a Wordpress page :)
Check your WP version and make sure the plug-in want to use is actually supported from your version.
Otherwise this bit -
Unsafe JavaScript attempt to access frame with URL http://taxlienagents.com/ from frame with URL http://player.vimeo.com/video/32340130?title=0&byline=0&portrait=0&color=067fc0. Domains, protocols and ports must match.
causes your problems. But as I've said check your versions first.
If that's your own code, make sure it's in the right place, 'cause after 2 or 3 refreshes I can see your entire content. I mean the bits you can't.
I am working on a Flash app that is 900x700 pixels. When viewed in misc. browsers at 1024x768, the browser chrome causes robs too much of the vertical space and the app appears in a window with a vertical scrollbar. Unacceptable.
The flash app will be launched via a link emailed to the viewers.
I'd like to avoid resizing the flash app and am wondering if there's a way to do the following via javascript, with no clicks involved:
maximize the current browser window
remove current window address bar and tabs / switch browser to full screen view (equivalent to pressing F11).
An alternative would be to resize the flash app vertically to match the browser canvas height to avoid scrolling. This may cause the app to become unreadable, so not the best approach in my case.
Thank you!
UPDATE: Seems that browser resizing and autoswitch to full screen won't work and neither will the flash app auto resize. What is the best approach then? And, some users may have browsers with toolbars or open a small browser window.
The only idea I have is to use javascript and display a message to users with small browser windows to pres F11 manually. The audience is executes and some may not even know what an F11 means...
There is no way to maximize the browser window to full screen with JavaScript. While this is unfortunate for your genuine requirement, it is considered a security restriction.
Sources:
Stack Overflow - To view the silverlight app in fullscreen mode(F11)
SitePoint Forums - Trigger F11 using javascript
Webmaster World - F11 Fullscreen using Javascript
The window size can be altered by using:
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight);
To answer the question in the comment you made to your own post. Yes. You can have a button whose click handler does this
stage.displayState = StageDisplayState.FULL_SCREEN;
You can use JavaScript to open a new window (using window.open) and control the window that is opened (no address bar, etc). You can also control the size of the window (you can't maximize it, but you can get the users screen size, and set the window that same size).
Chrome 15, Firefox 10, and Safari 5.1 now provide APIs to programmatically trigger fullscreen mode. Fullscreen mode triggered this way provide events to detect fullscreen changes and CSS pseudo-classes for styling fullscreen elements. These APIs may present you with a more acceptable solution for those browsers.
See this hacks.mozilla.org blog post for details.