I am facing strange issue in Splash screen of windows phone 8.1 store app.
Scale Image size (pixels)
1x - 480 x 800
1.4x - 672 x 1120
2.4x - 152 x 1920
Thses standard sizes I have given. Although Image does not look proper in 4.7 inch 720P devices.
Any help is appreciated.
I don't think theres much you can do to improve this (except like #neoproudek suggested using ExtendedSplashScreens)
But depending on your senario, you may only have to change the Splash Screen Background Color to a color that accommodates the Splash screen image color. Thus if you have a single color background splash screen image, such as the Windows Phone Music app with an Empty Splash Screen Background Color it will look like this:
But changing the Splash Screen Background Color to #107C0F like so:
Quick note: Splash Screen Background Color does not have an alpha component
The end result is a good looking Splash screen:
Hope this helps!
You can (only) do it with just images (through appxmanifest) if you prepare the splash screen so, that the top and bottom parts are in uniform colored fill, which you can seamlessly extend to the top and bottom of the screen by setting the Splash Screen Background color in Package.appxmanifest.
Related
What is my phone real resolution? The resolution that CSS detects.
The phone is a Samsung S6. Its factory specifications show a resolution of 1440px x 2560px.
How ever when I use css #media(max-width:...px) to detect the screen resolution, the mobile browser acts as if it's somewhere between 768px and 991px width.
Using Google chrome inspection tool and toggling to mobile view, it shows that a Samsung S5 has a resolution of 360px x 640px.
So where is the real resolution in all of this?
Screen size and screen resolution are NOT the same. You seem to be confusing the two.
Google's web developer tools detect the screen size (as in the width of the screen) as opposed to the screen resolution.
Screen resolution refers to the clarity of the text and images displayed on your screen.
At higher resolutions, such as 1600 x 1200 pixels, items appear sharper.
To summarise; the google inspection tool picks up the physical screen size of devices and emulates them, it does not emulate the screen resolution which is essentially the quality of the output of text/images.
The accepted answer seems to be incorrect.
#OP here's what you need to know:
Screen size is the physical size of the screen, and is measured in inches.
Screen resolution is the number of pixels making up the screen, and is measured in pixels.
Your phone has a resolution of 1440x2560, as stated in the spec sheet.
So why does CSS act like the resolution is lower? It's because the contents of the screen that you are seeing on your mobile device are zoomed in.
This is done because showing text etc. at 100% size on a 1440x2560 display that is only ~6 inches would make the text so tiny as to be illegible.
So, if the amount of zoom is 200%, CSS thinks the screen is 720x1280. If 400% (as seems to be the case with your phone), CSS thinks 360x640. And so on...
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.
Why does iOS scale images up? I am building a site and want it to be mobile friendly, when I look at it on iOS my pixel-based images are getting scaled up for some reason.
Shouldn't the browser keep the images the right size? I have been testing it mostly in chrome using Dev Tools and setting it up to emulate iphone 4 and the images don't scale at all, it displays them as they are supposed to be.
I took a couple screen shots and the iphone width its taking is 640px, but my media query is as follows:
#media screen and (max-device-width: 479px)
What am I doing wrong? I can't find a solution to this. I need the pixel font images to stay pixely. Same for my splash screen. Screen shots available if you need....
You probably haven't been seeing the issue because your emulator isn't retina display, and therefore your images aren't being scaled, but your device is probably an iPhone 4 or later, and therefore has retina display, which assumes it needs to scale images unless directed otherwise.
Regarding devices with retina display, image resolution works in the browser similarly as it does on the device. If you want crisp images, you need to specify a separate image for the retina display. This stack overflow post has a few suggestions for implementing it: Apple retina support for images in HTML