I am making a non-native iOS application in Xcode using cordova(phonegap) and the angularJS framework
I am differentiating between css properties in different orientations by using:
#media all and (orientation:portrait) { }
and
#media all and (orientation:landscape) { }
In Xcode simulator in portrait mode, when a text field is clicked on, the onscreen keyboard pops up. When this happens, it switches to the css of the landscape mode while still keeping portrait orientation. This obviously messes up all formatting.
Would appreciate any suggestions to why this might be happening.
Thanks in advance.
To fix this issue try changing your orientation checks to aspect ratio :
Replace
#media screen and (orientation : landscape)
with
#media screen and (min-aspect-ratio: 13/9)
Replace
#media screen and (orientation : portrait)
with
#media screen and (max-aspect-ratio: 13/9)
Source : https://www.robinosborne.co.uk/2014/09/12/android-browsers-keyboards-and-media-queries/
I had a similar issue with portrait/landscape mode in iOS 7 and this fixed it:
Check your html meta tags for something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
Replace it with this:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
Related
I am referencing this guide on how to "make a mobile friendly website." It does not seem to be taking effect on my Chrome-Browser for Android.
#viewport {
width: device-width ;
zoom: 1.0 ;
}
I added this to my Django static files in app.css and it is definitely on the website because I can see it using Chrome Developer Tools on my laptop. However, when I use my Android phone (Galaxy S8 if that matters) it does not fit to screen.
I also have this in my base.html that my entire site is using:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Some follow-up questions: Do I need to empty the cache on my phone? How can I use Chrome Developer Tools on my phone to inspect the CSS of a website?
From What I understand that is just a css based replacement for the following HTML meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
I would suggest using the above meta tag in your index.html In addition too this you will still need to add #media queries to actually make it responsive for the various screen sizes.
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575px) ...
// Small devices (landscape phones, less than 768px)
#media (max-width: 767px) ...
// Medium devices (tablets, less than 992px)
#media (max-width: 991px) ...
In addition to the above PX based breakpoints, you can also use DPI-based break points: https://css-tricks.com/snippets/css/retina-display-media-query/
But to actually answer your question about the remote debug console I don't know about anything else that workes as well as the Chrome Developer tools for mobile (Ctrl + Shift + M)
use <meta name="viewport" content="width=device-width, initial-scale=1.0">.
is it possible to write a single max-width query which can be compatible for all the mobile and tab devices? Since I am new to css, a help would be appreciated.
#media screen and (max-width: 768px)
You will also need <meta name="viewport" content="width=device-width, initial-scale=1.0">
It's my understanding that this query would target specifically my iPad Air 2 and apply the styles that I have added. However, nothing is applied and it looks the same as the Desktop view. I had to apply a different menu for my website to scroll properly on my iPhone, (overflow-y:scroll / hidden didn't work so I created multiple sections that display menu options as opposed to displaying the content in a div) but I'm having troubles targeting iPads as they also do not scroll properly.
#media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
/***
my css goes here
**/
}
The following works on iPad Air 2
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)
Put this meta tag in before the query:
<meta name=viewport content="width=device-width, initial-scale=1">
You can read more about what it does here: Responsive Meta Tags
You may want to not put all of the desktop and mobile css all in the same page but make links to different sheets. That way you save on initial load time and won't waste time loading both of them. Like this:
<link rel='stylesheet' media='only screen and (min-width: 821px)' href='css/big.css' />
<link rel='stylesheet' media='only screen and (max-width: 820px)' href='css/little.css' />
I've researched this question and tried to solve it on my own for hours, to no avail. Hoping one of you can help. I am using this media query for the style I want on a desktop browser:
#media all and (min-width: 320px) {}
And I'm using this media query for the style I want on mobile browser:
#media screen and (max-width: 320px) and (min-width: 0px) {}
When I drag the desktop browser to less than 320px, the style changes accordingly. But when I bring up the website on a mobile browser, it displays the desktop style. What am I doing wrong?
You need to include this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope it helps!
I've done a lot of reading off of stackoverflow and various sites off of google, but I haven't been able to find a solution for this yet. :(
I have in my header:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
...
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mobile-style.css" />
(I originally only had the first two in my meta viewport content (width=device-width, initial-scale=1.0), but added the second two after reading through some articles.)
In my mobile-style.css file, I have:
#media only screen and (max-device-width: 568px;) {
...
}
I have experimented with the max-device-width here as well, it has been 320, 480, 600, and 680... none of them work.
I can view this mobile stylesheet on my xperia Z using the dolphin browser (but not the Chrome browser), and on my friend's iPhone 3GS. Elsewhere it doesn't show up. The goal is just a simple mobile layout for the current site for any smaller-sized screen device.
Let me know if I should be providing more information.
Thanks! :)
EDIT
Here is the gist for my mobile-style.css file: https://gist.github.com/melissanoelle/7043032
Sorry for the delay, I've been away from a computer while traveling for my grandfather's funeral. :(
try this:
#media screen and (max-width : 480px) { /* change to your breakpoint */
...
}
Do you find any difference once you change your media query from:
#media only screen and (max-device-width: 568px;) {
...
}
To
#media all and (max-device-width: 568px) {
...
}
Are you sure you want to use max-device-width and not the max-width (targeted display area)?
Change your viewport to this:
<meta content="width=device-width, initial-scale=1" name="viewport">
Do you still have issues?
Turns out I needed to change my css query to this:
#media screen and (max-width: 568px), screen and (max-device-width: 568px) {
...
}
I got rid of the semi-colons and created a query for both max-width and max-device-width.