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.
Related
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.
I have my 15-inch 2017 MacBook Pro connected to an LG 27-inch 4K monitor. When they are connected, I have IntelliJ IDEA showing on the monitor on Desktop 11 (out of the 15 total I have) while Safari and my other stuff shows on the MacBook on Desktop 1. When they are not connected, then I just have IntelliJ showing on the MacBook Retina Display.
I used to have it so that IntelliJ had the size of the various editors and side windows were different depending on whether IntelliJ was being shown on the monitor or the MacBook. Obviously, when showing on the monitor, you have more real estate to work with so you can expand the size of the editors and such so that you can see more text. Now, it used to be that when I would connect/disconnect the MacBook from the monitor, macOS would automatically adjust the size of these windows/editors to the layout that was proportionate to the display it was being shown on. It no longer does this. This is a minor inconvenience that makes me have to readjust the window/editor sizes every time I switch displays.
Originally, I had this layout for when IntelliJ displayed on the LG:
and this layout for when it was on the MacBook Retina display:
Whenever I would connect/disconnect my MacBook to the LG, macOS would automatically scale IntelliJ so that I didn't have to do anything to make it fit whatever screen it was going to be shown on.
But now, it doesn't do that anymore.
Connecting the MacBook to the LG makes it go from this:
to this:
Disconnecting the LG from the MacBook makes it go from this:
to this:
What did I do that made macOS no longer automatically scale IntelliJ when switching between displays? What can I do to make it do this behavior again?
how can I set a minimum size in an universal app (win 10) for the application window? in my project I have only object with Page tag, not Window. I want that the screen of the application can't be resized less off a certein value.
thanks a lot
In the Package.appxmanifest of a Windows 8.1 Universal app, you could set a minimum width, to one of 3 pre-defined values. Setting minimum values on your page will not prevent your application from resizing. Setting maximum values will not prevent resizing either, but it will result in black borders when the application frame is larger than your set dimension. It's worth mentioning that 320 px is the absolute minimum width on 8.1 and on Windows 10 (for phones).
In Windows 10 UWP this property is no longer available. You should AdaptiveTriggers to handle your UI layout on Windows 10.
If you want to check the minimum resize dimensions, keep the scaling of your pc in mind. My laptop scales at 125%, a screenshot of the minimum dimension for the desktop client is 627x441 (~500x350 at 100%) including the space used for the app bar. But it's more common to just use AdaptiveTrigger and 720 pixels as the cut-off between phone and tablet.
you are working on a universal app, you shouldn't set a minimum width . It should be working on every resolution and device.
you should instead use visual state manager and adaptive triggers.
best of luck !
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
I'm building an application using Sencha Touch that's targeting iPads. The only way to achieve a smooth animation that I know is to use -webkit-transform css property. That works for moving things around with translate3d and scaling them, however I'm looking to change elements' dimensions (width and height). Imagine an element that grows in size to accomodate for a new child - that's what I'm after
You won't have any luck with width and height, as any transitions for these properties won't be hardware accelerated. What you'll get instead in Safari is a jerky animation that isn't even scaled properly. In my tests, the browser would first transition the height, then the width would snap into place abruptly, or vice versa. If all you want to do is scale an element (change its dimensions) then you should us -webkit-transform: scale(x, y).