Wrong device height and width on mobile phones - javascript

I'm trying to get the screen resolution of mobile phones in my Ionic app using platform.width() and platform.height().
Testing it with a One Plus One (1080x1920 pixels), it gives me 360x640.
Visiting this website with the phone gives the same values.
What's going on here? Is this normal behavior? I would think window.innerWidth() and .innerHeight() would work on mobile phone too.

Related

CSS properties not working on certain mobile devices

This has been happening to me quite frequently and its driving me nuts. I make my website, It's completely responsive on desktop, I looked at the responsive toggle in chrome dev-tools and mozilla dev-tools. Everything is fine. I go to publish my site, everything looks good, I check the site on my phone and tablet and those are fine too. Now if my friend who has a different phone or tablet try's to access it, the images are either stretched or squeezed and do not follow the CSS properties I gave them. I have no idea why this is happening and haven't been able to find a solution yet. Any help would be greatly appreciated.
(This is not a media query issue It's mainly images getting distorted, but only on select screens)
not sure if this would help, try giving fixed width & height for small images other than header or banner images and include them in flexbox. Header or Banner images will more or less will get trimmed with respect to mobile layout.

Responsive Design Mode on desktop does not behave the same on the actual device

I am having a frustrating CSS problem. I am building a a single page JS map application and am trying to synchronize styles across browsers/devices. I thought I did a successful job using Responsive Design Mode in Safari/Firefox. It looks the same to me when I switch between iPad/Galaxy/iPhone/desktop in the browser emulator.
However, when I actually open the page on my phone in Firefox/Safari, it does not appear the same. Specifically, the ? button is wider than the rest of the buttons below it. I specifically have the width property explicitly set to 40 pixels in the CSS.
What is happening here? Why is the ? button wider?
Here are some screenshots of what I mean:
Desktop
Desktop/Responsive Mode iPad
Desktop/Responsive Mode iPhone
My actual iPhone
I tried connecting my phone using Remote Debug but I don't really know how to use it without visualizing the actual phone screen so I can't see what I'm editing. Anyone have any ideas?
I found the problem. For some reason, padding was being added in iPhone and not in responsive mode or other browsers. Adding padding:0 to the button fixed the problem.

screen.width vs. Device Real Resolution

I was trying to understand about screen.width when viewing e.g. New York Times on my Android and iOS devices. Here are what I found (all viewed at portrait orientation):
screen.width returned 320 when I remote-debugged my iPod touch, which is supposed to have a 640x1136 resolution.
screen.width returned 384 when viewed on my Nexus 4, which is supposed to have a 768x1280 resolution.
Shouldn't screen.width return the resolution of the device? If not, what JavaScript object could I use to reliably get the resolution info?
What seems to be getting me the correct coordinates is window.innerWidth and window.innerHeight. I can guarantee they'll work, but they probably will. If they don't, make sure that the website isn't zoomed in (some mobile browsers zoom automatically)
What's basically going on here is that, to make sure that older sites render properly on these devices, Apple made the decision to report the original sizes when they moved to the retina display on the iPhone. Because of this precedence, Google made the same decision. If you are at your PC and it has a resolution of 1024x768, it will likely be a 10+ inch display. This would not translate well to a device that is only 4 or 5 inches diagonally, at least that's the rationale.
For a more in-depth look at this idea, I suggest you check out quirks mode's blog post about it, which you can find here

New method for getting device type for mobile webpages

I've been researching for a good way to get the devicetype to trigger mobile websites and many people still use script that gets the screen width/height in pixels to determine if mobile devices are used or not.
But mobile phones/tablets have extremely high resolution screens so we need to get another way to trigger a switch between normal websites and mobile websites.
Screen sizes are around 1,280 x 768 - 1920x1080 for mobile phones and 1920x1080 to 2560x1600 for tablets.
What is the correct error-proof method to determine mobile or not?
I'd like not to use javascript over php, if there's an easier method then javascript please tell!
you can make the mobile website responsive trough Media Queries in your CSS
It will overwrite your normal CSS for the website. Media Queries will check for resolutions and what you put in the media query will be shown like that in a resolution like that
http://webdesignerwall.com/tutorials/css3-media-queries
With Javascript you can do check the browser with the code I found on this page:
http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/
with that code you can redirect to a website specially designed for mobile website

Detect and differentiate Android Tablet from Android Phone via JavaScript?

I have seen Detecting whether Android device is a phone or a tablet with javascript but I want to know if there has been any newer, more stable way to do this as it seems the method described on the answer section is inconsistent.
Basically, I have a website that I have an Android app for but I only want to alert those who are on mobile devices as I want to show the full site to tablet users.
Another method would be to go by screen width/height. Tablets are larger than phones after all.
For example, if you know you're dealing with either an android phone / tablet check the screen.width property.
This method can be particularly useful if you're interested in taking advantage of larger resolutions which some tablets may have. Not all tablets will have a larger screen after all.
I'd advise against using User Agents. They're dependant on the browser which the user is currently using.

Categories