In case i want to check user's device by its resolution(i.e 300x600px for mobile, 800x600px for tab, and 1024x768px for pc).
but, how can i get the user's screen resolution when their javascript is disabled?
or is there any other way to solve my problem?
You can use CSS media queries to apply CSS rules targeted at certain screen resolutions and orientations.
I dont think you need to create diffrent pages for eaxh reslolution juat use CSS media queries for adjust page according layout.
If you want diffrent page per resolution then you have to use some server side lib or function to detect browser resolution
#media should do it
By your specs:
#media (max-width: 799px) {
#import url("/uri/to/mobile.css");
}
#media (min-width: 800px) {
#import url("uri/to/tablet.css");
}
#media (min-width: 1024) {
#import url("/uri/to/desktop.css");
}
Related
I'm trying to create a Responsive Web page with the only use of media queries but I could not...
I already added the following breakpoints...
#media screen and (max-width: 991px) {}
#media only screen and (max-width: 600px) {}
#media screen and (max-width:525px) {}
I got an error in the size of 360px...
please anyone can help me to solve this problem I don't know what is the exact problem
Yes it is possible to make a responsive page using media queries, you should define your queries for the resolutions instead;
#media screen and (min-width: 1400px) {}
#media only screen and (min-width: 700px) {}
#media screen and (min-width:450px) {}
And try using a resizable screen to always check and also width:auto; for internal containers and overflow:scroll should help you do a nice work overall
yes, you can create a responsive web page using media queries. You can use min-width or max-width but the best approach is the mobile-first architecture. Please add your source code to figure out what went wrong.
I am pretty new to html, js, and css. I was wondering if just. like in IOS development where auto layout is needed for different screen sizes and/or orientations if this is the case for developing a website. I've looked around and seen things like margins and auto, but I'm not sure. Is there any specific links or videos one could suggest to understand this concept so that no matter how the screen size is the contents on board will adjust. Thank you.
use media queries like this :
#media only screen and (min-width: 1024px) and (max-width: 1025px) and (min-height: 1366px) and (max-height: 1367px) {
.header { width: 90%; }
}
I've ran into an interesting problem. On my website I have two versions of navigation bar for mobiles - landscape and portrait. To detect these two I use CSS media orientation.
#media (orientation: landscape)
{
/* inline menu */
}
#media (orientation: portrait)
{
/* multiple rows menu */
}
However, when I open my keyboard page turns into landscape, because the actual page size becomes smaller. Can someone help me how to fix this? All I can think about is focus event on inputs, so whenever they're focused the portrait manu is turned on, but it would change the menu even on landscape.
Here's an illustrative image
Thanks!
If you check Media Queries W3C Recommendation
You will find this interesting sentence:
The ‘orientation’ media feature is ‘portrait’ when the value of the
‘height’ media feature is greater than or equal to the value of the
‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.
So, when the keyboard is opened, your page turn into landscape mode.
There are multiple ways to overcome this problem, you can
check this answer.
You should ignore the height/orientation completely. Something like this:
#media (max-width: 480px)
{
/* inline menu */
}
#media (min-width: 481px)
{
/* multiple rows menu */
}
I am trying to make the following jsfiddle code work. Actually all is working fine, for server side i am using ColdFusion.
the values are appearing 6 in a row. the 6 is hard-coded in ColdFusion variables, so it splits the values in 6 and then next row.
Now i want to make this a responsive so it should work with tablets and mobile devices without much pain in the a****s
Here is the fiddle i had generated
http://jsfiddle.net/9arpxvga/
This needs a help in implementation of responsive design...
A Jquery, javascript solution will also work
You're going to be hard-pressed to find an objective solution to such a broad question. So, broadly: one of the many ways to implement responsive design is to write CSS media queries, targeting various screen sizes. Here's an example snippet taken from getskeleton.com (which might be worth checking out if you need a bare-bones responsive framework to get you started)
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {}
You'd just write new CSS (or override your css) for each of the screen sizes you're trying to target. (Nest your css within the brackets after each media screen). Hope that helps.
If I hava all my font sizes in ems, and then use javascript to change the css rule determining font-size of the body (which will be in px) surely this will result in text that grows with a widening, percentage-based grid?
Apparently, changing css rules is tricky and doesn't support legacy versions of some browsers (guess which one), but if I embed my body rules right on the page, will that make things cross compliant?
you can use the font-size in em like font-size:1em or in % like font-size:5%
try to put the css in
#media screen and (min-width: 768px) and (max-width: 800px)
{ css }
according to device width like ipad and for the iphone you can change that
#media screen and (min-width: 320px) and (max-width: 480px)
{ here is css }
so that you able to see your design perfectly st these resolution