I'm developing a React project in Windows 10 and the issue I've come across is that my website design looks too big(when on 100% resolution of Chrome) on my laptop screen and works fine on 75%, I guess it's rendering the design of large screens on my laptop. Please guide me how to get rid of this problem and view the website in normal mode.
I've set my Window's Scale and Layout as 150%(Recommended), and Resolution of 1920 * 1800(Recommended), but when I view my website in the Chrome inspect tool at the dimension of 1920, it seems fine but when I view it in normal mode, then it content becomes so bigger.
Note: You might say that it's due to 150% but I've also checked by decreasing this, it decreases all the other content on screen but website looks same.
Please note that Chrome's resolution and Window's layout are two different things mentioned above,
first one is set to 100% and the second is 150%.
Related
I've developed a WinJs app for the Surface pro 4. The app Runs in fullscreen and is layoutet with the screen resolution of 2736x1824 (surface resolution).
Now when i start the App on the surface the DPI scaling comes into play and messes up my Layout.
Is there a way to disable the scaling for the app?
I've tried:
Windows.UI.ViewManagement.ApplicationViewScaling.trySetDisableLayoutScaling(true);
but that doesn't seem to work.
Actually, making your app layout only for one resolution, especially for such a big resolution is not really great idea since the app can run on device with, for example 1920x1080 resolution where even with DPI scaling disabled your layout will be messed up.
So I recommend making the app layout responsive so it will look right on every resolution.
Not sure if you're still looking at this issue but I've found that the code that you see all over the place is actually XBox only (Link To Docs)
And the Microsoft Devs have been saying for a while that it's a user based setting and they don't plan on allowing you to ds(Forum Link)
You can detect the scaling value though with ResolutionScale (docsLink)
Windows.Graphics.Display.DisplayInformation.getForCurrentView().resolutionScale
Here's a link to a sample that detects it and adjusts.
So what you can do (and what I did) was where needed I used css scale to adjust the system to fit. Most of my app is responsive so it didn't matter, but if you use an iFrame and set it to be 1000px wide with this scale factor it will actually be 1400px or even 1800px wide and totally cut off..
I have listeners setup for the resize events and just adjust as needed.
Hope that helps!
-Dennis
I have a custom receiver and using it to cast an HTML dashboard. Everything works great except for the resolution. It looks like the chrome browser (on the chromecast) is displaying at a very low resolution.
It looks like the TV is still getting the feed at 1080p but the browser is zooming in or something like that.
If I just draw a box 1900px wide on the screen about half of it is chopped off. Is there anyway to control the display height/width of the chrome browser running on the chrome cast?
It is 1280x720 but it is best to query for the window size within your JavaScript so if in future things change, your code is still accommodating for that. You also might want to take into account the possibility of overscan on TVs.
When i try to load a website it shows like this on my desktop:
http://img846.imageshack.us/img846/9646/1354627721863.jpg
Now normally it should flow well like it shows on my laptop:
http://unforgivenwow.com/theknight/unforgivenwow/
anybody a clue?
Nvm, got it fixed. Appearantly windows used my monitor his colors so i changed those to rgba.
Different monitors display images differently. If it's just a matter of the image color quality, your monitor might not be able to handle all of the colors. If it's a matter of speed, then it's probably an issue with your computer or internet connection.
I'm extremely new to Media Queries so I was playing with the min-width: attributes with my Firefox 12.0 and noticed that it just wasn't working. After some playing around and after experimenting with this lovely website
http://barrow.io/lab/media-query-viewport/
I found out that the minimum min-width that my Firefox supports on my machine (it's an XP box) is 615px. Why? I'm trying to play with Media Queries so that I can make a website that works well on many devices as well as desktops. This includes devices that are 480 and 320 pixels wide. With Firefox not allowing me to test the smaller widths it's going to seriously affect my development.
Is there any kind of a work-around for this other than trying a different browser?
Thanks.
EDIT: Now that my Firefox has gone through a few upgrades (now at v22) this is not longer a problem. I'm glad it got fixed.
As of this: http://support.mozilla.org/en-US/questions/772847#answer-125895,
Firefox supports no more than 480 width, so if you want to test for 320 px, you must use a different browser. I would point out that if you want to test smartphones on your site, you should be using smartphone browsers on smartphone hardware... not just desktop browsers set to really small resolutions, which is what it sounds like you were trying to do.
There's a simple workaround: load the site in an iframe of your desired width.
Oh, and as for why, the behavior you observe is due to the Firefox user interface not shrinking down below a certain width for some reason. Often due to extensions mucking with the UI.
Use the Web Developer toolbar extension and you can see a selection of common screen sizes by selecting Resize > View Responsive Layouts
Here is the simple solution
install chromEditPlus Plugin from here http://webdesigns.ms11.net/chromeditp.html
And then Goto Tool-> ChromEdit Plus-> ChromEdit
select userChrome.css pannel
copy and pate below code Save then restart
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#main-window:not([chromehidden~="toolbar"]) {
min-width: 200px !important;
}
Thus solved the Problem this made your windows minimun to 200px
Thanks
We have a website that currently serves drawings to users via the SVG Viewer plugin. We have one client that sees it through IE8. With IE8, when they do a Change Zoom Level on the browser to anything other then 100%, the viewer tries to occupy the new space and zooms correctly. However, when the user tries to manipulate the frames inside that bound the viewer (it's a frameset website with the viewer being in the center) the entire site hangs. IE8 also shows that it takes up CPU cycles on the client computer, so it's trying to do something but hitting a loop.
I don't think this is actually our code and might just be something with SVG and how IE8 handles plugins and it's zoom. Does anyone know if this is a real problem and if there's a good solution?
If you are referring to the Adobe SVG Viewer plug-in, then I recommend that you (ideally) get your clients to start using a web browser that supports SVG natively — i.e. Chrome, Safari, Firefox, Opera; even IE9 (to some extent) — or use a different shim like SVGWeb to provide SVG support for those users of older browsers who also have Flash installed.
I found out what the problem was. I thought it was the SVG viewer trying to do something with the frames, when it turned out that I was just setting the frameset's initial size to the clientHeight and clientWidth, and then subtracting something from the height. That subtraction was a toolbar based in the frameset and, when you change the zoom level in the browser, there's a lock up that can occur with you trying to pull a components size and the client's size. At least, this is what I was seeing.