Does anybody know how to achieve the rotation and orientation effect of the integrated calculator in windows phone 8 and 8.1.
Are there two different pages for landscape and portrait or is it one page with animations?
The buttons are with automatically calculated width and height to fit the screen. If animations are going to be used, you cannot set auto width and height to Landscape state.
Any ideas?
Related
I'm new to the world of web design and I've started with HTML and CSS. I've begun by building my own website from scratch and I'm currently stumped with how the design scales across different platforms.
When viewing my website on an iPhone 7, which is listed online as having a resolution of 750 x 1334, my inline-block images are able to sit next to one another in rows of 2. I don't understand how this is possible when they are set to have a height and width of 400px. I've attached a developer screenshot from chrome dev tools to show further. Developer tools showing the issue
Do I have a misunderstanding of how iPhones display content? If the maximum width resolution is 750px (and only 375px according to chrome dev tool...) how is it able to display 2 400px images side by side?
iPhones have "Retina display" which have a higher screen resolution than the "logical" resolution that you see in dev tools.
The image (content of the whole screen) is first rasterized, after that downsampled to the screen resolution and then displayed on the physical screen.
For the iPhone 7 model (and 6 and 8) scale factor is 2.
These models have screen resolution of 750x1334 and logical resolution of 375x667.
You can find resolutions for other models here and more details here.
As for the 2 images with width of 400px displaying on the 375px with screen side by side seems like a viewport zoom "issue".
The of the html is not visible on the screenshot, but the "jumbotron" class on the suggests that you used bootstrap. Perhaps you have unintentionally set the viewport when you where setting up bootstrap.
I have a Windows Phone App for WP 8.1 (Not Windows Phone Silverlight) and I've specified all splash screen sizes in the package manifest. However, for 720p phones (like the Lumia 720) I'm getting letterboxing of the splash screen.
I've also tried adding the Windows Phone Silverlight splash screens from the documented spec, but I get the following error in the build:
MakePRI : warning 0xdef00520: Invalid qualifier: SCREEN-720P
And then I still don't get a full screen splash screen.
Is there any way to prevent this letterboxing?
I believe the only way to solve this is by making the borders of your splash screen of uniform color fill, and set that color as background color in the Package.appxmanifest, so the letterboxing is not seen.
Thing is, Windows Phone 8 and 8.1 devices come in on of four resolutions: 480x800, 720x768, 720x1768 and 1920x1080. From these you can see there are two ratios, 15:9 and 16:9. And the splash screen images you set in the manifest, are all 15:9, just for various screen densities of the 15:9 ratio. So, no way to avoid the letterboxing, as the OS obviously "fits" the splash image into the screen.
I'm working on the design for a windows 8 app, with a team of developers.We have finalized most of the screens for the app, the developer informed me to do the mockup of the entire app in photoshop to be presented to him and the screen size should be 480 x 800. ( right now sitting at 480 x 1800 due to scroll in page)
I have been informed to optimize the mockup for the other 2 remaining screen sizes 768 x 1280 and 720 x 1280 is this required? wouldnt this be covered in development stage.
From my present html5 and css knowledge building small static websites, width 100% in a container with width wouldnt fix this?
As the design is following the guidelines with grids i made from the guidlines pdf i had set it up for 480 x 800 now with two new screen size how can i go about this?
Can i change the canvas size in photoshop and resize all the elements?.
Please let me know if there is anyway possible to get hands on - SplashScreenImage.Screen-WXGA.jpg , SplashScreenImage.Screen-720p.jpg so i can overlay the jpg in photoshop and create grid i have windows 7 not able to install SDK to get these 2 images.
Mockups for other resolutions would be (almost) the same. There is automatic scaling. The only difference is that 720p resolution screens represent scaled 480x853 resolution, which is almost never any problem (if you have scrollable pages, like you described, the developer has to only make sure that the scrollable component is the one to be expandable in height).
See more here.
The only problems are images. The advice (of the above source) is to use the highest scale, that is for images of size 100x100 on 480x800 screen, use files of 160x160 size.
In documentation stated that it is enough to keep the only WXGA splashscreen file and it will be scaled by windows Phone OS automatically.
To display a splash screen for all resolutions, use a single image
file named SplashScreenImage.jpg that is 768 × 1280. The phone
automatically scales the image to the correct size.
http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206974(v=vs.105).aspx#BKMK_Splashscreens
But when I'm using the only file no scaling occurs. I still could see black line on the top of the phone during app start.
Sample here:
https://dl.dropboxusercontent.com/u/19503836/SplashSample.zip
Thanks for any suggestions
You'll notice that it says "scale" and not stretch - which is exactly what's happening. Windows Phone 8 supports 3 resolutions (so far)...
480x800 (15:9)
720x1280 (16:9)
768x1280 (15:9)
You'll notice that the aspect ratio of #1 and #3 are the same, but #2 is different - and that's the problem.
For an image to fit all resolutions it would have to be stretched, which would look very bad so Windows Phone 8 doesn't do that. Instead, it scales the image to fit the screen but a black/white bar appears at the top of screen for #2.
The only way to avoid the black/white bar at the top of the screen is to create 3 separate splash screen and specify them in the WP8 manifest file.
Note: Making your app work and look correct at multiple resolutions is what every app developer should do. All the major platforms (iOS, Android, Windows 8, etc) support multiple screen sizes and/or resolutions so creating multiple icons sizes, splash screen sizes, background images, and other assets is part of the jobs.
I don't think a "splashscreen.jpg" is a good choice in wp8 any longer, even the templates of sdk doesn't have one.
The reason is if the firts page of your app is massive and your have a splashScreen, you may find your screen blink when starting.
So I would add a blank page and set it as the first page. Also you can add your "Splashscreen" Image here.
I want to display a website in a Windows Phone 8 WebBrowser view and fix the viewport zoom to display content in the logical screen resolution, e. g. a 300 CSS pixels wide element should take 300 physicals pixels on a device with a device pixel ratio of 1.0 while taking 600 physical pixels on a hi-res screen with 2.0 device pixel ratio.
Windows Phone 8 WebBrowser view elements rely on #-viewport when it comes to configuring a web page's viewport: http://msdn.microsoft.com/en-us/library/ie/hh869615%28v=vs.85%29.aspx http://dev.w3.org/csswg/css-device-adapt/#the-lsquozoomrsquo-descriptor
Yet, zoom properties are not implemented and therefore cannot be used. Is there any CSS or JavaScript approach to achieve the desired behaviour?