I need to check whether user's resolution is <1300px or >1300px and if it is <1300px to load layout with horizontal divs and if it is >1300px to load layout with vertical divs.
Template is the same I only need to put one div in horizontal or vertical position depening on resolution.
Since I cannot do it with PHP, I have to do it with javascript, so I would have to use "load" function to load part of my template where is vertical or horizontal div? I'm using Yii framework
You can use CSS media query for that:
// For screen < 1300px
#media screen and (max-width: 1300px) {
.foo {
...
}
}
// For screen > 1300px
#media screen and (min-width: 1300px) {
.foo {
...
}
}
Typically this sort of thing is in the CSS domain (via media queries), not the JavaScript domain.
You can use the screen object, though, to get the dimensions of the user's screen:
var width = screen.width; // Or screen.availWidth;
In JavaScript you can detect it by:
window.screen.availHeight
window.screen.availWidth
while in CSS you need to use media queries:
#media screen and (min-width: 1200px)
Related
I have an HTML Website. I want to display it in an mobile app using HTML code. But I wan't to block / not load the original website background because it's very large and you can't see it mobile.
Is there a way to do it with HTML / CSS / JavaScript?
Use media queries to load the background image if the screen is larger than XX.
Add the media query to your CSS.
Change div to the element you're loading the background image on.
<style>
#media (max-width:500px) {
div {
background-image: none;
}
}
</style>
** EDIT **
With mobile-first being the correct approach, it would be preferred only to add the background image when the viewport reaches the required size.
<style>
#media (min-width: 644px) {
div {
background-image: url(/image/here.jpg);
}
}
</style>
CSS Media Queries is the best way to apply different styles for an HTML document in different resolutions.
so, if you want to apply a different style (here remove background image in mobile resolutions) you may use Media queries
Eg.
<style>
#media screen and (max-width:640px){
element{
background:none;
}
}
</style>
I'm building up a website using fullpage.js. When zoomed 100%, the webpage looks great, yet, when zooming just 25% more, texts and imgs will start overlapping or even disappearing, as each section has very limited height (with no scrolling), making my webpage impossible to read. I'm using
em
unit for font sizes and percentages for sizes, imgs and margins (except if its too little margin (5px, for example), where I use
px
). Hence, I was wondering if there's a solution using Javascript, CSS or HTML which can maintain font size even if the webpage is zoomed. As of now, I've tried, with no success, the following:
document.body.style.zoom="100%"
-webkit-text-size-adjust: none;
Using fullpage's feature resize, but it only works if the user resizes the window once the page has loaded.
document.body.style.webkitTransform = 'scale(1)'
My website is (sorry, I don't know which part of it to post, as the issue involves all of it):
http://rienpipe.es
Thanks in advanced!
you can fix this by using #media query's and a viewport in your css , and add this meta tag to your html:
<meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”>
and with the #media query's and viewport you declare what size you have per screen width using this media query + viewport in css:
#media screen and (min-width: 820px) and (max-width: 920px) {
#viewport { width: 820px; }
// your css for screens between 820 and 920 pixels in width goes here
}
i mostly use the value's : from 20 - 600 , 600-700 , 700-820 , 820 - 920 , 920 - 1200, #media screen and (min-width: 1200px){ #viewport { width: 1200px; }(this last one will set the size for any screen bigger than 1200 px in width so your code for the biggest version goeds here}
So this means you will have 6 times your css code which is adapted will be adapted to the size.
This is called adaptive or responsive design and is pretty easy to do
For more info you might check this http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I have a design built at the correct width of 640px. I want to set the pixel ratio so that I can write 10px when I mean 10px of a 640px width. I don't want to try to divide every value in half. Is this possible? Something like, initial-scale=0.5, maximum-scale=0.5?
Thanks!
This can be done with the use of a media query within your CSS
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* iphone 4 Styles */
}
I want my page to scale awesome to fit all possible screens on all devices, so I've used an idea to change em size of the root element. All child elements have sizes in em;
Resizing of the page and zooming should also be supported well.
I'm currently having 200 lines of such a funny css code:
.........
#media (max-width: 400px) {
#vb { font-size: .8px}
}
#media (max-width: 350px) {
#vb { font-size: .7px}
}
#media (max-width: 320px) {
#vb { font-size: .64px}
}
.........
I would like to ask for a pretty library that would generate this code automatically.
I am sure that this huge css code should be generated on frontend, because those 200 - 1000 lines consume kilobytes.
PS: What about correctness of my approach?
The solutions could be:
what if I calculete the page size by JavaScript and put just two lines of code like:
var fontSize = calculateFS();
$('#vb').style({sizeSize: fontSize});
This code works good if we are not going to resize the window or zoom in-out. But if I'm going to catch events onzoom or onresize, there are serious lags in interface.
any other ideas form the community?
Thank you for attention
Why not consider responsive typography using rems?
This article explains this in much more detail. A short excerpt:
#media (max-width: 640px) { body {font-size:1.2rem;} }
#media (min-width: 640px) { body {font-size:1rem;} }
#media (min-width: 960px) { body {font-size:1.2rem;} }
#media (min-width: 1100px){ body {font-size:1.5rem;} }
This would seem like a far better option than using ems or pixels, because rems are relative to the body element, not the parent element.
I might have misinterpreted this, but it doesn't really seem like you need to use so many media queries, or even any JS at all.
If you just want to keep media queries maintainable, perhaps consider using Compass and Sass? http://css-tricks.com/media-queries-sass-3-2-and-codekit/
I am using an iFrame Colorbox (http://jacklmoore.com/colorbox/) and I need to make it "responsive".
Right now I have set the width to 90% and it works but after a certain size I do not want it to expand anymore, regardless of screen size. I want to set the max width to 1200px.
How can I do this?
Have you tried the maxWidth property? You use it in conjunction with the width property in order to set a max size. Example: $('a.example').colorbox({width:'90%', maxWidth:1200});
I just did something like this... below is for iPhone/Android. Needs some tweaking depending on content but it's a start for ya'll.
#media screen and (max-width: 480px), (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min--moz-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
#colorbox, #cboxWrapper, #cboxContent { width:320px !important; }
}