I just got to test IE10 on a Surface Pro with 1920*1080 display resolution where "make text and other items larger or smaller" has been set to Large.
On my website I have added the CSS+JS viewport fix in addition to the viewport meta tag, all asking for width: device-width (plus I added a "min-width: 320px;" to the #-ms-viewport definition to ensure it never gets smaller than that).
I added some javascript to display the value of window.screen.width and $(window).width to see what the browser ended up using for viewport in IE10, and to my surprise the screen size of a 1920*1080 resolution display was reported as 1280x720!
Now, I can live with with that (just like small phone screens report 320px width no matter their actual resolution, since it is a good size to make stuff human readable across devices for the same font size), but when the 'Metro IE10' is snapped to the side of the screen, the problem comes: IE10 tries to make a 320px rendering of the website, but it zooms in so the right side of it is hidden.
I tried Microsofts own test page: http://ie.microsoft.com/testdrive/Graphics/MakeItSnappy/
It does the same thing - on the Surface Pro the right side is hidden, and you need to drag left/right to see it, and you cannot even zoom out to view the full width!
But when trying the same thing on my laptop with a 'normal' 1366x768 display (rendered as 100%), the snapped IE10 display has the perfect size.
Ok, I guess this is a Microsoft Windows scaling bug - but my question is: Has anybody else experimented with changing the "make text and other items larger or smaller" to 125% or 150% and making websites adapt correctly?
Check out this fix from developer Matt Stow
http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
Related
wxWidgets 3.1 claims to fix the Windows High DPI issues. It works too but I see blur UI (fonts/bitmaps) looks stretched.
I went through the https://learn.microsoft.com/en-us/windows/desktop/hidpi/high-dpi-desktop-application-development-on-windows
I did the manifest changes to make my application DPI-aware, it removed the blur effect but application layout went wrong, every layout looks smaller (unusable UI).
Note* issue more vigilant on 3K and 4K system. Hardcoded pixel sizes are not scaling (like 400px width button, 500pixel width panel etc).
wxWidgets gives you a (relatively simple) way to make your application work in high DPI, but doesn't -- and can't -- do it automatically for you, in particular only sizer-based layouts without hardcoded pixel sizes will work correctly and you do need to provide your own higher definition artwork.
Concerning the existing pixel values, the simplest (even though not really the best) way to make them work better is to put FromDIP() calls around them.
Also note that you don't need to do anything special for pixel values in XRC, they're already interpreted as being resolution-independent pixels and are scaled according to the DPI automatically.
In Edge, on a Surface Pro 2 in tablet mode, the max-width always seems to be the "natural landscape" width. So when viewing pages in portrait, the media queries for the larger width are active. Is this a bug or a feature, and if feature is there something I can do to code around it?
When in desktop mode it works properly.
I'm having a strange and irritating problem on WinRT Surface tablet when using DirectX (hosted in BackgroundSwapChainPanel). Basically once in a while (like once a day, or few times a week / while testing for few hours every day), half of my 3D scene goes black, like on the picture below (cut vertically or sometimes horizontally):
http://www.zurawcli.vot.pl/dxProblem.JPG
While this happens, the DirectX is still rensponsive and i have full control of the app.
I don't think posting code makes any sense ( i'm simply using standard SwapChain and resizing viewport and back texture whenever screen size changes - actually getting screen size from Core Window). This only happens once in a while : ( when i try to explicitly force this - like by splitting screen between two / switching between apps / and so on, I CANNOT repeat this error - viewport always resizes correctly. Then sometimes just using the app, this will happen.
Did anybody had any experience similliar to this ? Any ideas what is causing this ?
Thanks in advance,
cheers
i developed a game for the iphone4. Now i got problems with the iphone5 and the 4inch screen. My game is on the left side of the 4inch screen and i have a big black border on the right side. But the buttons from the game are in the middle of screen, they have same position like on the iphone4. I checked everythin but i dont know why the background-images and the sprites are on the left side and the buttons are in the middle. I want that everything is in the middle or on the left side. It would be great if anybody could help me!! Thanks!!
COCOS2d-iPhone:
If you're using the latest beta, the only change you should need to
make is export all your images at twice the size and use the "-hd"
suffix, similar to Apple's "#2x". The documentation also says you need
to set the content scale factor of the director.
You can find the documentation here.
and more detail here.
COCS2d-X:
Cocos2D-x has a very easy solution for multi-resolution problem.
In fact you just need to set your DesignResolution and then just imagine your target device will has this resolution.
If target device really has this resolution ( or some other but with same ratio) cocos2d will handle to fix screen and your game looks same in all devices.
And when ratio of target device is different, you have many option ( as cocos2d language, policy) to manage that.
For example if you use Exact fit policy, cocos2d will force your game ( and design) to fit target device screen (without that black boarder).
Exact fit
The entire application is visible in the specified area without trying
to preserve the original aspect ratio. Distortion can occur, and the
application may appear stretched or compressed.
For more detail just take a look at this link : http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Multi_resolution_support
I've been trying to render the entire canvas in an IWebBrowser2 control to a bitmap. IViewObject::Draw seems to be the most promising approach, but I can't get it to render anything that would requires a scroll to show. While I could automate the scrolling and stitch the images together, this would look weird with any fixed position elements. Is this even doable?
Additionally, I've tried to set the controller's size to one that would allow the entire contents to display without needing to scroll, but Windows caps the max size to the current screen resolution, so that only gets me partially there.
Any help would be much appreciated. I'm currently doing this in the context of Win7 and IE8, but I don't think that should matter much.
Sorry it took so long for me to follow up with the answer to this.
I wrote up an article detailing how to trick Windows into allowing you to resize a window larger than the virtual screen resolution, allowing functions like PrintWindow or IViewObject::Draw to capture the entire client area (i.e., the browser canvas).
http://nirvdrum.com/2010/03/25/how-to-take-full-page-or-full-canvas-screenshots-in-windows.html
An actual implementation of the technique can be found in my SnapsIE repository on GitHub (username: nirvdrum). Unfortunately I don't have enough karma to post two hyperlinks. The repository is linked from the article though.
It is very likely an IE optimisation that avoid to draw more than required. You might be able to scroll the window and call IViewObject::Draw in a loop without any animation occuring ?
I'm surprised that Windows caps the max size to the current screen resolution. Are you sure about that ?