Disable resizing snap view in Windows 8.1 - javascript

I'm working with a Windows 8 app using Java Script.
In windows 8 there is only one snap view and that is fixed one. But when we come to the windows 8.1 we can resize the snap view. I want to do is keep that fixed size snap view in windows 8.1 also. That means, I want to stop resizing snap view when my windows 8 app running on windows 8.1..
Is there any way for it...?
Looking for example or any guide... Thank you

#dougajmcdonald is correct. The user is in control and will be able to resize any app to most any size, so your app will need to account for it. You can change the minimum size of your app which gives Windows a hint about where to give the user a snap point. For instance, if you say your app's minimum size is 500px then when the user is dragging the separator, it will snap to 500 pixels, but it will still allow them to resize to say 587 pixels.

I don't believe you can stop it, as it's a part of the OS and apps are supposed to adhere to it.
You can control your app via media queries in the CSS to fix size to particular values when the app width is at certain values.
Or you can detect the application state and look for 'snapped' and set sizes in the JS code perhaps.
EDIT:
In order to use CSS which applies to the application in snapped mode you can find good examples in the MS Template applications, taken from their CSS you can use:
#media screen and (-ms-view-state: snapped) { // my styles }
Which will allow you to apply specific styles in the snapped state.

Related

React.js CSS window width

I'm developing a responsive website using react. For styling I use CSS stylesheets. The responsive part is achieved in CSS using #media queries.
The problem is that when I use chrome, the elements appear bigger and the layout is as I would access the website from a smaller screen (tablet). What I understand is that chrome 'thinks' that the view port is smaller and responds to the media queries with the according information.
The problem appeared in the middle of the development process, after some time of working correctly.
What did I do wrong and how do I fix this?
Note: When opening the website in Firefox, everything works as it should. Also, when I open dev tools in chrome (Inspect F12) and 'toggle device toolbar' to true (Ctrl + Shift + M) the dimensions are set correctly. The problem appears only using 'regular chrome'.
if the elements are appearing bigger and you want to design according to the width of the device, use vw (viewWidth) to set the sizing of the element. Use vh to set sizes according to the height of the device.
You can set font size, height/width of the div element, etc. Use this inside media queries so that the size of the font or width doesn't get too small when using mobile phones.

Detect browser keyboard IME feature

The problem: I'm working hard to implement a responsive UI in my app. But the keyboard IME on Android squishes my entire page layout into a frame that's about 96 pixels high when in landscape orientation. Typically this means that the input control being edited is not visible in the space above the IME. And one cannot edit a value that's not visible in Chromium. I'm assuming iOS has the same problem.
Setting a minimum height for the page helps. But the Chromium scroll-into-view implementation is not robust enough to keep up with some of the more complex page rewrites that are triggered by a change in window size in my app.
Ideally, I'd like to run the keyboard IME in "extract" mode, where the page is entirely hidden, and only the value being edited is displayed in the space above the IME. But as far as I can tell, there's no way to do that, even in Android native apps. Chromium never runs the keyboard IME in "extract" mode, even in landscape orientation.
The solution I'm current implementing: simulate "extract" IME mode by perform editing of values in a full-screen dialog that contains nothing but a single dedicated <input>.
The question is: how should I detect when to use this solution. it's easy enough to check the browser's navigator.userAgent. The Mozilla foundation recommends checking for /Mobi|Android/ (although I've seen solutions that have 40 or 50 patterns). But I'm wondering whether there's a feature-driven way to check for this instead -- something more along the lines of if ("geolocation" in navigator) ....
But as far as I can tell, there are no features related to whether and how a keyboard IME will change the layout of a page. If there are, I'd like to know. The "feature" I'm looking for is something along the lines of "Will this browser lay out my entire page in a frame that's 96 pixels high (in landscape) whenever an input control gets focus". But "does this browser uses a keyboard IME" would be satisfactory.
Any ideas appreciated.

Responsive Design Mode on desktop does not behave the same on the actual device

I am having a frustrating CSS problem. I am building a a single page JS map application and am trying to synchronize styles across browsers/devices. I thought I did a successful job using Responsive Design Mode in Safari/Firefox. It looks the same to me when I switch between iPad/Galaxy/iPhone/desktop in the browser emulator.
However, when I actually open the page on my phone in Firefox/Safari, it does not appear the same. Specifically, the ? button is wider than the rest of the buttons below it. I specifically have the width property explicitly set to 40 pixels in the CSS.
What is happening here? Why is the ? button wider?
Here are some screenshots of what I mean:
Desktop
Desktop/Responsive Mode iPad
Desktop/Responsive Mode iPhone
My actual iPhone
I tried connecting my phone using Remote Debug but I don't really know how to use it without visualizing the actual phone screen so I can't see what I'm editing. Anyone have any ideas?
I found the problem. For some reason, padding was being added in iPhone and not in responsive mode or other browsers. Adding padding:0 to the button fixed the problem.

Set viewport size for a browser

I was playing with a webapplication page developed by me using selenium.
Using selenium JavaScriptExecutor I executed following script.
executor.executeScript("return window.innerWidth");
executor.executeScript("return window.innerHeight");
to my surprise, the so called viewport size came different from Chrome, IE & Firefox.
Chrome: 1366x667
IE: 1366x667
Firefox: 1366x657
Then I realized that for body and main div, right next to body I gave css style width and height as 100% which in turn effects the view port size. As different borwsers are having different size of toolbars and menu, this 100% value changes when actual page is rendered.
So I used window.resizeTo(w,h) for setting a common viewport size. But I realized it doesn't work with modern browsers until and unless window is opened by the same script.
So I used selenium's
driver.manage().window().setSize(new Dimension(w,h));
yet I am not able to set the common view port size.
Please help to find, is it possible to set common viewport size using selenium?
Do let me know, if you need anymore info.
I executed following line for all browsers:
driver.manage().window().getSize();
Answer I got is 1382x744
So I believe this about the overall browser window, not only rendering area.
And I got confused that based on the difference of innerWidth how to calculate the browser window's new size?
PS: I have all the browsers upgraded to latest version (IE is version 11 as I am on windows 7), selenium version I am using is 2.46.x
"to my surprise, the so called viewport size came different from Chrome, IE & Firefox."
It should not be surprising that the view port size is different on all browsers, Safari even has a different one as well. When you are calling window.innerHeight it only counts the browsers inner content. So anything outside of it is not counted, the area where you enter your URL is entered is not counted for example. So each browser uses a different amount of maximum height by their tabs, and Global address bar.
When you use driver.manage().window().setSize(new Dimension(w,h)); and set it to 1920x1080 for example then all browsers will be set to that size, but of course they will have different inner height being used.
If you want the entire browser to render as 1920x1080 then I would suggest with
using Robot robot = new Robot();
robot.keyPress(KeyEvent.VK_F11);
Thread.sleep(250);
robot.keyRelease(KeyEvent.VK_F11);
but I would advise against it, since a more valid test is to use the normal inner height of the browser, since most user do not press F11 and view their content at full screen.

Site not loading properly on mobile

I am having issues trying to load my site, http://www.internhacks.io/, on any mobile browser.
The project can be found here on Github.
I have tested the site on mobile using Chrome dev tools, and everything loads fine/acts responsively.
However, when testing the site on my actual phone, sometimes the site does not load at all, sometimes only partially.
Note: the apply button is not meant to do anything yet
I think it may have to do with having a large image as the background. Should I be serving a smaller version if detecting the window is smaller? The img height is set to 100vh.
If anyone knows what might be causing this, or knows of a better way to debug the site on mobile than in Chrome dev tools, please let me know!
I use Opera mini to test mobile devices (aka android) with various screen resolutions.
"height is set to 100vh" huh? never saw that one before. To fit graphics within space available, avoid fixed sizes (aka 100px) and I use relative width:xx%
YES, it's wasteful to send large graphics to a mobile device and from the server, you need to send some xxx-low-res.img instead
it's helpful to load JS scripts into a section to allow all objects to be loaded first.
I think your main issues is that the big images should use smaller, light-weight pictures instead since it'll speed up the resize process when rendering on the phone. Other than that, you want to stick away from, as #jobeard mentioned, from using fixed sizes like the 100vh and use a relative width such as 10%.

Categories