everybody seems to use pixels to determine screen size of a device, but it is not a good practice anymore. You can use bootstrap to create a responsive website, but it will fail on full hd screens, because a lot of pixels, don't mean big screen anymore.
My example:
on bigger screens, I don't want website to take the entire screen and on smaller screens I do. The easy solution is to use max-width, but it doesn't work if a device has a full hd screen, because it's small with a lot of pixels.
#media screen and (min-resolution: 300dpi) {
//styling which will be applied >= 300dpi
}
Source 1
Source 2
Related
I'm working on a react native application in a company and my manager asked me what is the best image size in pexels to upload from API (dashboard) to fit the View in the application ?
And I'm using percentage units not numbers: (width: '80%', height: '50%') I don't know what is the best sized of images to fit or the aspect ratio of the image and react native is unitless!
What should we add 'Hint' for the client in the dashboard when he upload any image ?
Or how could I know the best image dimensions to fit all screens ?
In our organisation, we usually follow the following convensions to make an image fully responsive.
Get the dimentions of the image using: const {width, height} = Image.resolveAssetSource('path-to-your-image');
Get the ratio factor of width and height by using: const ratioFactor = height/width;
Whenever you set the width of your screen by 'n' digit, set the height to 'n*ratioFactor'
In this ways the image can never be stretched or compressed. It will be fully responsive according to it's dimensions.
Preferably use image with standard dimentions as 1024 x 768 pixels.
In case the app target both iOS and Android, there is a multitude of devices with various resolutions and pixel densities from high-end iPads to low-end androids devices with smaller resolutions.
The General rule of thumb is to find the average image size which will not pixelated (look blurry) on the high-end devices but does not have a large download size in case some users will have slow internet.
You should start with 1024 x 768 pixels which is a standard dimension for iPad
Consider using resizeMode prop of react native image. With resizeMode you can manage to render image based on available space in screen.
Check it here : https://reactnative.dev/docs/image#resizemode
I've the following constraints which are working perfectly fine over Chrome in Desktop (simulating mobile resolution)
const constraints = {
audio: false,
video: {
width: screen.width,
height: screen.height
}
};
navigator.mediaDevices.getUserMedia(constraints).then(stream => {})
However when actually trying this on iPhone / Safari the camera doesn't respects this at all and gets super small or distorted - removing the width / height from the constraints makes it better ratio but not full screen at all, just centralized.
I've also tried with min / max constraints without lucky.
Is there any way to get this working on iPhones?
I have built a few AR Websites which are mobile first. When you request a resolution the web browser sees if the resolution exists, and if it doesn't it then decides if it should emulate the feed for you. Not all browsers do emulation (even though it is part of the spec). This is why it may work in some browsers and not others. Safari won't emulate the resolution you are asking for with the camera you have picked (I presume the front).
You can read more about this here (different problem, but provides a deeper explaination): Why the difference in native camera resolution -vs- getUserMedia on iPad / iOS?
Solution
The way I tackled this is:
Without canvas
Ask for a 720p feed, fallback to 480p feed if 720 gives an over-constrained error. This will work cross-browser.
Have a div element which is 100% width and height, fills the screen, and sets overlay to hidden.
Place the video element connected to the MediaStream inside, make it 100% height of the container. The parent div overlay hidden will in effect crop the sides. There will be no feed distortion.
With canvas
Do not show the video element, use a canvas as the video view. Make the canvas the same size as your screen or the same aspect ratio and use CSS to make it fill the screen (latter is more performant).
Calculate the top, left, width and height variables to draw the video in the canvas (make sure your calculation centers the video). Make sure you do a cover calculation vs fill. The aim is to crop the parts of the video which do not need to be shown (I.e. like the descriptions of various methods in https://css-tricks.com/almanac/properties/o/object-fit) . Example on how to draw video into a canvas here: http://html5doctor.com/video-canvas-magic/
This will give you the same effect of what you are looking for. Production examples of something similar.
https://www.maxfactor.com/vmua/
https://demo.holitionbeauty.com/
P.s. when I get time I can code an example, short on hours this week.
There are a couple of quirks on mobile gUM() you need to know about.
First, if the device is in portrait orientation things work weirdly. You need to swap the width and height. So, let's say you're on a 480x640 device (do those even exist? who cares? it's an example). To get the appropriate size video you need
const constraints = {
audio: false,
video: {
width: screen.height,
height: screen.width
}
};
I can't figure out exactly why it's like this. But it is. On iOS and Android devices.
Second, it's hard to get the cameras to deliver exactly the same resolution as the device screen size. I tweak the width and height to make them divisible by eight and I get a decent result.
Third, I figure the sizes I need by putting a <video ...> tag in my little web app with CSS that makes it fill the browser screen, then querying its size with
const rect = videoElement.getBoundingClientRect()
const width = rect.width > rect.height ? rect.width : rect.height
const height = rect.width > rect.height ? rect.height : rect.width
This makes the mobile browser do the work of figuring out what size you actually need, and adapts nicely to the browser's various toolbars.
When I use WMP i have an option to "Zoom to fill" this fills the entire screen regardles of aspect ratio obviously with aspect ratios like 4:3 there will be some automatic cropping involved. However I cant seem to get it done using the WMP control in VB.net
If AxWindowsMediaPlayer1.playState = WMPLib.WMPPlayState.wmppsPlaying Then
AxWindowsMediaPlayer1.fullScreen = True
AxWindowsMediaPlayer1.stretchToFit = True
End If
Either one of the options shown above do zoom to fill but only as far as the aspect ratio will allow (it wont crop), meaning in the aspect ratio of 4:3 the video will play with a vertical black bar on either side, Something which if the same video is played in standalone WMP would not happen.
How do I make the image fill the entirety of the screen without any bars?
Okay I see the issue now I have mistaken the Movies & TV app for WMP. Perhaps if I get the aspect ratio from the MP4 file and then use the height of my screen to calculate the width and resize the WMP to be wider than the actual screen size litturaly pushing the two vertical bars off screen?
In light of research VCL library's are just as easy to use and are more suited to my situation
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 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