I try to adapt my website to smartphones. I used media types to do it:
#media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:landscape) {
/* Style here */
}
#media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:portrait) {
/* Style here */
}
Testing: I charge the webpage and it looks perfectly (portrait mode for example), change the orientation of the smartphone and the webpage adapt to landscape mode perfecly, but comeback to portrait mode and the website turns to the "PC mode" (Don't using landscape-mode).
What can I do to fix this?
I solved it.
I used another media type:
#media (orientation:portrait){
}
(for example for portrait mode)
and now it works every time I change the orientation.
Related
Is it possible to create a media query for 5:4 desktops (1280x1024)?
I'm trying with this code:
#media screen and (max-width: 1281px) and (min-height: 1023px) {
}
..but it still not working
I think it is not working, because your browser does not have 1280x1024px on desktop with that resolution (it is smaller - something like 1260x980px because of scrollbar etc.)
I'm trying to develope a website with the responsive design and I know that I have to use media queries, I used them and they work fine on my desktop (When I resize the window the look change).
So I was wondering if there are some 'standard values' to use them with smartphones/tablet/desktop.
I've looked at other questions but are too old.
A bit of searching on CSS a you may found this :
http://getbootstrap.com/css/#grid-media-queries
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
Basically (if you read the comment lines), for classic CSS (meaning no less/sass), you would replace #screen-sm-min by 768px for instance. Or whatever fits you.
Basics of RWD you can refer
Google Web Fundamentals http://blog.froont.com/9-basic-principles-of-responsive-web-design/
Froont's basic principles http://blog.froont.com/9-basic-principles-of-responsive-web-design/
I am not getting how to write bootstrap media query for 768*1024 and larger devices. I know I can use #media then screen size{}, but I have write css for each and every tag button and rest elements? Is there any shortcut way? If I have to write then how can I write. Please someone provide me, sample code for bootstrap #media query to make my app responsive in tablet like devices.
Thanks in advance.
...depending on the size of the device there are many classes that help you achieve what you want in specific resolutions.
First of all in the customizer of bootstrap before downloading you can set your own breakpoints, then depending on the class you can use -xs- -sm- -md- -lg- along with the class you want to use it just for the specific resolutions.
For example:
using class 'visible-xs-block' means that this class that applies the display:block style, will only appear in XS devices - this depends of if you have custom breakpoints or using the default which is for devices up to 767px
edit: if you were using the class 'visible-lg-block' instead would mean that the class would only be applied for large devices (≥1200px).
Of course you can mix and match which classes you want, you can use both of these classes on the same element like:
<div class="visible-xs-block visible-lg-block">
..that would make the element visible only on xs and lg devices.
You can learn the functions/etc by using the help online;
http://getbootstrap.com/css/
Bootstrap is already responsive for tablets and phones as long as you use their grid system (try viewing the main Bootstrap site in such a device for examples). You'd only need media queries if you wanted to override or extend its default responsive behaviour.
Sudarashan I think if I read your further comments right, that you have an issue with specifically the 768px width screen size upto 1024px.
This code (taken from the Bootstrap site) shows the standard breakpoints at which bootstrap operates.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
Your initial question mentions that you are looking to respond between 768px and 1024px. This would start responding within the parameters of sm (small) 768px
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
BUT, would then run into the md (medium) parameter 992px (and above) all the way up to the desired 1024px that you are aiming for.
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
The solution
In this case you might be as well writing a new media query confined to the parameters you require here. From my understanding that would be as follows:
/* Custom sizes (768px to 1024px) */
#media (min-width: 768px) and (max-width: 1024px) {... }
This should provide the required breakpoint that fits your app I believe.
For my CSS media queries I've set it up mobile first which deals with all the overall styling.
I then have:
#media only screen and (min-width : 790px) {
}
#media only screen and (min-width : 990px) {
}
and I've added in
#media screen and (orientation: landscape) and (max-width: 520px) {
}
which deals with the CSS changes when the smart phone is turned round to landscape mode, but it doesn't seem to work, am I writing the landscape media query wrong?
Had a similar issue: my iPod/iPhone devices were detected as portrait orientation even when rotated.
I managed to resolve that with the following media query:
#media screen and (min-aspect-ratio: 4/3)
{*your styles here*}
If you want to target any case when width is greater than height, I think something like (min-aspect-ratio: 101/100) or something like this might work. However, for current devices 4/3 is sufficient, I think.
If you need aspect ratio for landscape, I think min-aspect-ratio: 1 suffices ... and therefore max-aspect-ratio: 1 for portrait.
But, even when the CSS is correct, there's an additional step required for a Cordova / PhoneGap app: Why doesn't my Cordova/PhoneGap iOS app rotate when the device rotates?
I found this StackOverflow item before that one, so perhaps others will also find a cross-link useful.
I am trying to design an email that renders uniquely in the native Kindle Fire email client. I am able to pickup on the initial horizontal view using the following media query:
#media only screen and (min-device-width: 590px) and (max-device-width:1014px){
/*kindle*/
#desktop { display:none}
#kindle { display:block !important}
}
...
<div class="mobile" id="kindle" style="display:none">Kindle Fire</div>
<div id="desktop">This is the desktop view</div>
The problem is that when I rotate the device to landscape, the media query is lost, when I rotate it back it's still lost. I have tried using the orientation conditional statement but that doesn't seem to work at all. Anyone have any suggestions?
for orientation based CSS just use min-width or min-height. Do not use "device". That's what's hosing you up. Device queries do not detect orientation changes.
This seems to work for me for landscape view but I haven't checked it against other tablet devices.
/** Kindle Fire Landscape **/
#media only screen and (min-device-width : 600px) and (max-device-width: 1280px) {
}