I have a strange requirement with an electron application where I need to be able to force the document to render at a specific resolution and then stretch or squash it to fit the window. For example, I need to specify that the content size is 1920x1080 but then need to squash that down to an actual window size of say 1280x960.
I have tried to implement this in the DOM by setting a fixed body size and scaling this down to fit the window but this has a knock on effect on other transforms and animations which expect the non-scaled version. I need a solution which works outside the DOM so the document behaves as if it actually is running in a 1920x1080 window but then the rendered result is scaled up or down to fit the actual size of the window.
Is there any way to achieve this?
I don't think it's possible to set the native resolution of the window but maybe you can use the HTML viewport meta header. or use BrowserWindow setAspectRatio. or use webFrame.setZoomFactor(2) from electron api
Related
I am opening a PDF file in browser and I need to switch the view to Full Screen before proceeding. I have tried I.pressKey('F11') and even I.pressKey(['Control','+']) but nothing seems to work.
Are there any updated fixes for this? Or any other way to achieve this?
According to the documentation you could use resizeWindow to achieve it.
I.resizeWindow(width, height)
Where width and height are numbers of given pixels, where width can be set to maximize.
I don't know wich driver you are using but if it is Puppeteer you should be aware that:
Unlike other drivers Puppeteer changes the size of a viewport, not the
window! Puppeteer does not control the window of a browser so it can't
adjust its real size. It also can't maximize a window.
If I have an image that is 600x600 and I want to display it in 100x100 on a mobile device.
Should I resize the image 1st in Photoshop or should I just use width/height attributes (will this method force users to download a large image 1st and then resize it ?).
I know it is possible to resize using JS
The browser can resize images dynamically using CSS, but they doesn't always look as good as doing it in Photoshop. You should resize it for mobile to reduce the file size and bandwidth required.
I'm developing a new Flex app that's in the middle of an html page.
I want to be able to achieve what this website achieves http://monicaruggieri.com/ when zooming in and out in the browser. It makes the container smaller but does not rescale the swf file.
Presently my app, scales and it looks ugly. I want it to basically not scale and just make everything smaller.
You can accomplish this using the stage's scaleMode property.
I have found a relatively big image on the net and i set it as background in my web page. Though it appears in normal size..Is there any simple way to resize it in my html code?
Thank you in advance
You can use CSS3 background size property to set the size of the background image. - http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size. But it's better if you resize the image using photo editing s/w and use it as it is advisable to keep the size of a web page as low as possible.
WARNING
This is a CSS3 property, and it cant be assured that it'll work perfectly in all the browsers.
EDIT
To change the size of the image on the fly according to the browser size using jQuery check this - http://css-tricks.com/766-how-to-resizeable-background-image/
Hi I want to disable the resizing the html web page by the user. How to do that
I want to disable the resize button and manual resizing by dragging. pls help
You can't, thank God.
When you open a new popup you can request it be unresizable using the feature resizable:
window.open('something.html', '_blank', 'resizable=no');
however modern browsers may ignore your request as it is considered egregiously user-hostile.
Use liquid layout to make your page respond flexibly to changes in window size, rather than attempting to set it in concrete. The web is inherently a variable-size medium, and mobile browser users get no input in how large their screen is anyway.
Pardon? Are you talking about resizing the browser window? If that's the case then you can't do this in HTML, or JavaScript as it would be a security risk allow web pages to control browsers behaviour.
If you want to get rid of scroll bars you can set the body tag to 'overflow: hidden' in CSS?
If you mean to stop the page shrinking and expanding in sympathy with browser window size, then use fixed width elements as supposed to relative (%)