This question already has answers here:
can php detect client browser monitor size/resolution?
(8 answers)
Closed 8 years ago.
I'm interested in using a php if statement to include or exclude code based on the user's browser size. For example, a slider will only load if the user's browser size is greater than 768 x 900px.
I know how to hide an object using the css viewport, but I imagine the page speed would increase if I could simply not load the code at all, rather than hiding it.
A few questions so I can better understand
1) Is PHP capable of detecting a user's browser size?
2) Is an if statement a feasible way of achieving this?
3) Am I correct in assuming that not loading the code altogether is more efficient than just hiding the output via css?
4) I haven't started learning javascript yet, would you recommend that as the best way to achieve this?
Any help is really appreciated!
PHP is not capable of detecting the user's browser size. The PHP is executed before there even is a user, as it's on the server.
...
If you have tons of code, then yes, it might be more efficient, but a single slider should not make such a big difference. I would recommend just loading it, and hiding via CSS.
As i mentioned in the above bullet point, CSS is going to be more efficient than JavaScript. Just use an #media query:
#media (min-width: 768px) and (min-height: 900px) {}
If you want to detect the screen size of your client, PHP can't help you, javascript and CSS can.
If you are concern about speed, javascript and CSS can't help you (even if it is minified), PHP can.
My suggestion is, when the client visits your website for the first time, detect their screen size using CSS and after that, save it in a database and set a cookie/session that corresponds with it.
The problem with this workaround is when the client change their screen size before the cookie expires or the session ends.
Related
I know that similar questions were asked but this is different.
Intro: i'm triyng to make an website with adaptive designs (3 templates for 3 widths intervals as follows: 1200+px, 600-1200px, 600-px).
Problem: i have a really hard time with user screen width detection.
I' know that only js can detect user screen size so i tried two ways of detection.
1. First i used a cookie in order to store the width but because cookie becomes active only after refresh i need to refresh the page.
2. Second o used to send width as param with GET but again i need to refresh the page in order to send params.
So the question is: is there a way to get screen size without page refresh (the value to be stored in a cookie/session). I need the proper template to be delivered on first visit of page.
If there is no solution (only with refrest needed) for width detection how can a solve the problem for crawlers so they won't see the redirect.
Maybe I'm missing something here but you should be using #media queries https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
and
http://css-tricks.com/snippets/css/retina-display-media-query/
I think you're approaching this the wrong way. Surely css #media queries are the way to do this?
If for some reason you do need the width in Javascript, then you can do
jQuery:
$(document).width();
JavaScript:
document.body.clientWidth
I would revise your methodology if you can though..?
I ended up using a DDR (Device Description Repository), exactly this one : http://wurfl.sourceforge.net/
It works good and gives a lot of etails exept on firefox.
No CSS OR JS required for use.
I was looking around for a way to arrange content differently depending on screen size when I noticed this site. Quite a nice looking site too. As I change my browser's size, the column configuration changes? When I reduce to the very minimum size or visit it on a phone, the large image on top disappears completely, leaving only the small icons. I've turned off javascript, and this still happens. Also, it works in my ie8, so I'm guessing it's not an HTML5 thang. How is it being done?
Thanks!
This effect is not being done by Javascript, instead it is being done by CSS #media queries. Chris Coyier of CSS Tricks has a great intro to #media queries
Simply, it allows you to specify the scope of a stylesheet based on some boolean expression (such as checking if the window width is a specific width used in that example you saw) and then apply specific styles thus making it responsive design
This problem IMO is more related to CSS but I am open to any solution. I am trying to print a webpage who's height is defined in px (I also tried %). Now What's happening in Safari and IE 8 and onwards, page contents will not print on one page.
Current Setup
div.parent-container{
height: 900px;
}
div.parent-container div.child-containers{
height:100%;
}
What's happening
It will print everything on one page in FF but in IE and Safari contents will split in to two pages which is heck of a problem for my users. I have to tell them to set page-margins: 0.3 which is definitely not an efficient way.
What I have done
I have tried different #page and browser specific hacks to make it work but it doesn't prove to be fruitful OR doesn't seem efficient to me( Never been a fan of customized browser hacks).
What I want
CSS/JS solution to make page contents print on one page may be something like 'Shrink to Fit'.
Thanks,
Rahi
Printing devices usually measure their content in physical dimmensions (in, cm, ft, etc). Pixel width is dependent on monitor resolution, and thus can't be relied upon for every output device.
If it's crucial your page prints the way you'd like it, you'll most likely need a CSS file designed for printing -- one that uses inches, centimeters, or whatever you'd like.
Check out this previous post -- I think it will help.
This question already has answers here:
How to make the window full screen with Javascript (stretching all over the screen)
(22 answers)
Closed 6 years ago.
Hy all,
I need a javascript code, that when my site loads, automatically load it into full screen mode, as if i was pressing F11, and i have my reasons to do that..So anyone knows the right code to do that?
I also need to prevent the user from changing the screen size of the page
There is a full screen API, but it is currently an early draft and browser support is very weak.
Foisting full screen mode on anyone who visits your site is one of the more hostile things you can do as a web author. You should seek an alternative design that solves whatever problem you have without doing that.
Unfortunately, there is no perfect way to get the browser to come up in full screen mode. However, you can use the screen object to determine the screen size, and set your window size appropiately. The useful screen properties are availWidth and availHeight or width and height. You can then use those to set the window object properties, either innerWidth and innerHeight or outerWidth and outerHeight. I suggest you play around with retrieving and setting these properties. Also, different browsers behave slightly differently, so, if possible, I suggest you try your code on IE (which (surprise!) is the least standard), Firefox, Safari, and Chrome.
I know the "purists" will tell you forcing a certain window size is not a good thing to do. But in some cases it is appropriate. I have written an application related to the card game bridge, and, if the browser comes up too small, the card images are unreadable. So, the first time a user accessses my web page, I make it as large as I can. Most people leave it that size. But, if they reduce the size, I store the dimensions in a cookie, and the next time they go to my page, it remembers how big to make the page. I have received many compliments on using this approach.
For a site I'm working on I'm implementing image preloading with javascript however i most certainly do not want to call my preload_images() function if someone is on slow bandwidth.
For my market the only people with slow bandwidth are those using mobile internet on a smartphone.
What's the best approach for detecting these users so i can avoid image preloading for them?
option 1 : detect browser width
if($(window).width() > 960){ preload... }
option 2: detect user-agent with a list of browser to preload for
if($.browser in array safelist){ preload... }
are there any better options?
I find that I dislike sites that decide which version of the site I should access on a particular device or environment. It's great to make an initial decision based on whatever criteria you settle on, but for goodness sake, give me a link I can click so I can choose the "Higher Bandwidth Site" or vice versa and save it to a cookie. Then I can override any error the automated script makes with my own judgement.
Maybe using the CSS #media directive, along with hidden objects?
.imagesToPreload {display:none;}
#media screen {
#imageToPreload1 {background-image:url('blah.img');}
}
#media handheld {
#imageToPreload1 {background-image:none;}
}
Then in Javascript, you can fetch all objects in "imagesToPreload" class, read the backgroundImage property and preload it if its not none.
Admittedly, this is off the top of my head, I didn't test this idea. As usual, there must be something I am not thinking about...
I think edeverett's point about mobile not necessarily being slow (and similarly desktop not necessarily being fast) is a good one.
Remember not to remove choice for your visitors - i.e. most decent mobile browsers have an option not to load images (or specifically not to load large ones) and also avail of proxy services that compress images before downloading - some mobile visitors may want the full preloaded experience on your site.
Another solution might be something like:
if($(window).width() < 320){ preload_smaller_images(); }
There's less reason than there used to for the mobile browsing experience to be more limited than that of the desktop.
R. Hill's CSS suggestion is not the worst though (if it can be done in CSS, it should imo), it can also be done per-screen-size:
#media handheld, screen and (max-width: 320px){ /* */ }