Develop Reference

EXIF Orientation Issue in Safari Mobile

I have an angular 2 application in production environment that allows you to choose a profile picture. Recently, performing tests with safari mobile, specifically for IOS 13.3.1 version(older) and IOS 13.4.1(new) version. I noticed that the image is shown rotated depending of safari browser version used (I built a stackblitz for this that you can review):
IOS 13.3.1 version(older)
IOS 13.4.1(new)
When I take images from an iPhone's in portrait mode and upload the image to my app it is shown rotated only for IOS 13.3.1 version(older). However, I examined the EXIF ​​meta-information images from each of my devices and found that both images have the same value in the orientation property:
IOS 13.3.1 version(older)
IOS 13.4.1(new)
My question is. Why does the image display change depending on the IOS version, knowing that in both cases the orientation EXIF is the same value (6)?
This is a subject that worries me since I had already solved this problem by rotating the image depending of EXIF orientation value for its correct display (e.g. exif.js have been created to handle this situation by detecting the exif orientation flag), but this problem now appears again with the new version of IOS. What would be an example of code that I can use to make it sustainable over time? Is there not a consensus among the browsers to manage the orientation of the images?
What is the explanation for this illogical behavior?
Thank you so much!

We also stumbled upon this when our mobile suddenly behaved differently and finally find the root cause of this.
Both WebKit (iOS) and Android (Chrome) have just recently changed the default behavior of the image-orientation CSS propterty. While it was none before, it is now from-image. This means: Before, they ignored the EXIF data of an image by default, while they are now using it to auto-correct the image. Which break our own auto-correction based on the exifreader library.
Here are some relevant links:
https://www.fxsitecompat.dev/en-CA/docs/2020/jpeg-images-are-now-rotated-by-default-according-to-exif-data/
https://bugs.webkit.org/show_bug.cgi?id=89052
Funny enough, also the Slack team seems to have run into this:
https://bugzilla.mozilla.org/show_bug.cgi?id=1634180
Fortunately, the author of the exifreader library (who just some weeks later ran into the same problems) also guided me to a way to detect the behavior. You can find his answer here:
https://github.com/mattiasw/ExifReader/issues/99#issuecomment-640217716
I also noticed that Modernizr has a test for this, so I am actually using a custom modernizr build now to detect the browser behavior.

The webkit browser is rotating the images before you upload them based on the EXIF data then it gets applied again by your app. We were able to confirm this on new (81) version of Chrome and Mobile Safari on 13.4. then the app is rotating them further and it gets twisted.

Get Height of Surface Pro 3 on web page

I have a monitor with 1920x1080 resolution for my laptop and a Surface Pro 3 with 1920x1280 resolution. I am developing a web page designed for full-screen viewing on 1920x1080 and 1920x1280 displays.
I have confirmed the settings for each display (see below).
Why am I getting 8xx instead of 1280? How can I obtain a value of 1280 to match the resolution height of the Surface Pro 3?
1920x1080 monitor (on Windows 8):
1920x1280 (Surface Pro 3) display (on Windows 10):
Using $(window).height() on my 1920x1080 monitor, I get the following:
That works for me.
However, using suggestions from this question for my 1920x1280 (Surface Pro 3) display...
Using suggestions from the accepted answer.
Using $(window).height():
Using $(document).height():
Using screen.height:
Using the suggestion from this answer:
Using the suggestion from this answer:
Using the suggestion from this answer:
Using the suggestion from this answer and this answer and this answer:
Using this suggestion from this answer:
This suggestion is a self-recommendation of a plugin. I will pass on this for now.
This suggestion uses a Coffee solution. I'll stick to JavaScript and jQuery for now.
Using this suggestion from this answer (which regurgitates a few other answers):
This suggestion requires an external library. I will pass on this for now.
Using the suggestion from this answer:
This suggestion was incorporated into a few other answers above.

It seems that your Surface Pro 3 uses an operating system wide zoom factor of 150%. Due to this the browser returns width 1280 and height 853 (as 1280 * 1.5 = 1920 and 853 * 1.5 = 1280). Switch Windows' zoom factor to 100% in Control Panel and your browser will return width and height as expected.

1) How can I obtain a value of 1280 to match the resolution height of the Surface Pro 3?
Have you tried
window.outerHeight
yet?
All I see in your test cases is the innerHeight.
That's only showing you what the browser will render(pixels will be zoomed, etc.. decreasing the available width you actually have)
2) Why am i getting 8xx instead of 1280?
Basically, browsers will zoom text/images/ etc.. to give a consistent experience across several resolutions.
Even though you are building it for a 1280 screen, you might only have 8xx pixels to your availability.
For more information about the pixeling I advice you read:
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Here is a solution that worked for me in Firefox, Chrome, IE11, and Edge. I don't have a Mac to test on but this should work there too. You need to factor in the device pixel ratio. Here is an example (JSBin):
var screenHeight = window.devicePixelRatio * screen.height;
This will give you the screen dimensions regardless of DPI of the device.
An important thing to note is that innerHeight (size of window without browser UI) and outerHeight (size of window with browser UI) are relative to the browser window. You should use those instead of screen.height if you want to know the size of the browser window.

In the browser, you deal with the abstraction of CSS pixels, not with physical pixels. The size reported to you is most likely correct (unless there is a weird browser bug at play), so the height of the window is 853 CSS pixels.
My advice would be to work with that size. Adjust your layout with media queries etc. Don't try to second-guess the browser; don't optimize for hardware specifics which browser vendors, and web standards, are actively trying to hide from you.
(I'll try to expand this answer later on, if I have the time. A proper explanation of the concepts is the length of a blog post.)

Detecting Mobile vs. Tablet vs. Desktop Javascript

I am running into some issues determining the type of browser using Javascript. My current method is to capture the screen width and height and determine the type of browser based on pixel sizes.
I figured I could assume that any screen width under 768 would be mobile, anything under 1024 tablet, and anything above that a desktop.
I've started testing on a few devices I can actually get my hands on and the results are much different. For instance on an android (Droid Bionic to be exact though it doesn't matter much) its returning a width of 980 regardless if the device is in landscape or portrait mode. This is much higher than I assumed.
Currently I am using document.documentElement.clientWidth to determine the width but I have tried other approaches such as window.innerWidth as well.
I guess what I am trying to get at is a question that has been asked many of times and I thought I had a pretty clear answer to. Apparently it might be time for a refresh on proper browser/device detection. So what is the most effective way to determine the actual size of the device I am on?
UPDATE:
It seems as if mobile browsers are actually taking it upon themselves to decide how to display my application. And in fact they are, but there is a way to stop it. See answer. Fortunately this means that the standard feature detection methods we are used to are still the best way to determine the device you are using.

Per Dagg Nabbit's comment on the question:
It seems that mobile browsers take it upon themselves to determine the way a site is displayed. This typically means taking a desktop version of a website and zooming out to fit the contents on the screen. For 90% of the internet this is necessary otherwise the mobile browsing experience would be horrifying. For responsive websites this is no good because in most cases we have very specific elements that must be altered depending on the resolution of the device the site is being viewed on. So how do we stop the browsers from doing this?
By using a viewport meta tag. The standard tag looks something like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
But there are a lot of different ways you can customize this to suit your needs. A good reference is https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

Responsive CSS with high-res smart phones and tablets

I am having a issue when I try to make a web app responsive to screen-size.
I have css that I want to use for smartphones (iPhone, Andriod, blackberry, windows phone), and also have CSS I want to use for tablets.
My test devices are an iPad 3 (768 x 1024) and blackberry 10 (768 x 1280). and the widths being the same is an issue because my css starts with:
#media screen and (max-width:768px){
//enter code here`code here
}
Because the blackberry has slightly better resolution, it renders the CSS I don't want to use for it. Is there another way I'm suppose to check the media type? I was wondering if there is a way to check the width with a measurable distance (cm or in). not sure how to solve this.
thanks in advance

The “pixels” that are used in CSS declarations and when the browser reports the screen size of the client device have nothing to do with the actual real-world pixels on a device's screen. The “pixels” that are used in CSS are essentially an abstract construct created specifically for us web developers. To concern your self with the actual amount of real-world pixels on a high-resolution mobile screen is, for most web applications, completely unnecessary and will only lead you to utter madness.
You can determine the browser and device type by inspecting the navigator.userAgent property in JavaScript. For example, to test for (practically) any mobile device:
// if mobile === true, 99% chance the device is mobile.
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
You can of course inspect navigator.userAgent to determine if the user is on a specific type of device or browser that you are particularly concerned about or having a problem with.
But again, in my personal experience, clever, simple, and flexible responsive CSS design (supported by media queries and JavaScript, too, of course) will render beautifully on 99% of device/browser combinations without having to resort to inspecting navigator.userAgent to create different styles for individual devices.

You can also restrict your styles to the height:
#media screen and (max-width:768px) and (max-height:1024px){
// iPAD
}

You should add the meta tag viewport in your html header :
<meta name="viewport" content="width=device-width, initial-scale=1">
To sum up :
width = device width x pixel density
(Galaxy S4 : 1080 = 360 x 3)
This metatag allow you to catch the device width instead of the "faked width" (360 instead of 1080)
Some good reading :
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
http://screensiz.es/phone
http://www.html5rocks.com/en/mobile/mobifying/#toc-meta

Setting zoom level on mobile browser

I am designing website for mobile access and I want to set page width, height and button sizes, so they display filling up the screen. For example if user is using HTC HD , the whole screen would be 480x800 with button sized 240x200.
However IE mobile as well as Opera load the page with some zoom level, so the buttons display either too large or too small. How can I either read current zoom level in javascript or set it from javascript?

Take a look into <meta name="viewport">. It's supported across a wide variety of mobile platforms, including (AFAIK) iPhone, Android, Blackberry, Opera Mobile and even IE6 Mobile. Basically, it lets you preset the device width, zoom level, and max/min zoom. Have a look at the Apple developer site and for more info.
Also, you can use CSS media queries to detect the shape and size of the browser, and serve up different layouts (etc) accordingly. Again, these are fairly widely supported and the Apple developer site has more information.

You shouldn't rely on using JavaScript on mobile devices because it is still not widely supported across all phones. Instead you should set the width of the page to be the same as the browser width so your pages appear at 100%, e.g. body {width: 100%; margin: 0; padding: 0;}
As for buttons you should use relative values or use different image sizes if you are able to detect the browser width before the page is loaded.