I'm trying to record our software in Chrome's mobile device emulator. The resolution for the hypothetical device is 1080 x 1920 (vertical orientation). I would like to be able to just record the emulation screen at full resolution. I know I could record my entire screen and just crop for the window showing the software, but then it does not record at the proper 1080 x 1920 resolution and looks blurry. Does anyone have any methods for recording just the emulation screen at full size?
Essentially, I want to record the red boxed area in full resolution (which should be 1080 x 1920)
Chrome Screen Emulation Window
Thank you in advance!!
well, you can't "record" it in 1920/1080 because it literally isn't in that resolution. those pixels don't exist.
A few ideas come to mind -
Record on a 4k (or higher) monitor, the same area will have more
pixels.
if you don't have one handy (and have an nvidia graphics card):
try using Dynamic super resolution
Literally rotate you display and record it in the correct orientation ("portrait"). it will be able to occupy MUCH more screen area, and the cropped-out area will be significantly smaller. therefore, the video dimensions will still be large.
Move away the console (un-dock or just close), make sure the emulator is taking up as much space as possible.
Verify you're recording (and editing and exporting) in the highest resolution possible. that's how it looks like in obs studio:
Maybe use a Virtual Machine if you don't wanna mess up your desktop environment?
Related
I am currently working on a template for a webpage and I'm currently working on the responsiveness for it. I have the desktop version and the mobile phone versions working just fine. The problem that I'm having with it right now is I'm trying to make a version for tablets. The "tablet" I'm using right now is a surface pro which has a 96 dpi. My desktop has and older 1080 monitor. So when I open chrome up with dev tools on the surface the pixel width is the same or close to my desktop but is looking completely different. Text that is on a single line on the desktop is on two lines for the surface and not all is showing. The reason this is an issue is that this is the header of the page. At full width on the surface it's acting more like half width on the desktop. I thought it might be because the screen for the surface is higher DPI on the surface but not sure. Is this what is causing this and if so how do you fix it. Setting a media query of say 800px for tablet works for say desktop and some tablets but doesn't seem to be working for something like a surface. So is there a different way to set up width? I have code of the site but I don't think any of it would be helpful. If needed let me know.
Try using vh(viewport height) for height and vw(viewport width) for width, it uses percentage of the window. 100vh would use 100% of the window height and 100vw would use 100% of the window width. It's better than using pixels and requires less work to make the page responsive, pixels are inconsistent and break easily.
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'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 have an HTML5 page using CSS3 and SVG graphics in development. I tried using media queries to enlarge the SVG graphics when the device pixel ratio is 1.5 or 2. This works fine. Now I view my page on a small device like the Motorolla Xoom. The reported ratio is 1. This means the Xoom displays everything quite small as compared to a regular monitor. The most annoying part is that it looks great in landscape mode, but in portrait mode the full page is resized to fit in the same width. The ratio number does not change at this point.
I did try using something like 'width: 3in;' but again, it was only the correct size in landscape.
Ultimately, I'd like to use some ratio of device size vs pixel size, and scale everything this way. Is this possible?
My issue was that my graphics were never rendered again when orientation was changed. When I hit refresh again, all is coming up as expected. This was an issue that existed somewhere between my keyboard and my chair. The media queries are in fact working, I just need to rerender some stuff upon orientation change.