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.
Related
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.
I built a website with Foundation 4 and having some issues (lots of them) with the responsive part of it, decided to get rid of the viewports in the CSS which I thought would cause the website to render normally on small devices but the result is really bad and I'm not sure what's causing it. I have no more #media targetting small devices in the CSS and yet it still very very messed up.
You can look at the results on different devices there:
http://www.viewlike.us/
This is my website
http://broadcasted.tv/
Can anyone tell me what's wrong ? (Javascript or something ? I don't know, but it's bad...)
Is there a way to tell the browser to ignore diffferent width and handle everything the same way ?
Thanks
don't delete the #media queries, they are what is used to display things differently for each device. If you're trying to ignore different screen resolutions, you're not using responsive design.
EDIT: looking at your website, it seems to be fine for resolutions 1041+... with that knowledge, use those #media queries to get rid of that giant bar on the side.
Use a min-width for your header and divs so they don't become smaller than the desired size, I see something like that happens to your header.
For example, I just tried adding min-width:1100px; to your top-bar div, and there seems to be less of a problem in that part.
I'm not saying having a 1100px header is recommended (because it's not) but I'm just using it as an example.
I want to replicate a site for it's mobile version. The site have slider , simply header,footer and dropdown.
Are we able to make exact thing for mobile ( in my case I am talking about slider and drop-down made in jQuery).
What I want is make same feeling on mobile as we have for normal site. Like I see in Video example as people shown (demonstrate) for ipad,iphone that click on menu and page slide to right and something show as new page. I don't want this.
I want to choose the existing themes and color-scheme in mobile edition.
How I can do it.
for this we have something called as Responsive Web Design :)
you can have a look at here :
http://www.netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1
Another good place to start: http://html5boilerplate.com/
This topic is much more complicated than simply adding a few lines of code, but here's what I can offer:
If you want separate mobile and desktop (which I would suggest against) you're going to have to do some device sniffing. The easiest way would probably be to check screen size and redirect if it's under 320px or whatever size you decide on.
This will make your page load a little slower, because you're going to have to wait for the page to parse the screen size detecting script, check to see if their screen is too small, and then redirect. That's going to take a long time on a mobile device and you're not going to make any fans because of slow load time.
Responsive design is the best solution. I think you should take a step back and consider why you want your site to split into two different sites and if you are going to have the ability to constantly maintain both.
You need to use media-queries http://www.w3.org/TR/css3-mediaqueries/
with media queries u can set styles for misc devices and save mutual html...
Instead of responsive design, you can use a DDR to tailor your content to particular mobile devices: http://wurfl.sourceforge.net
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.
I'm working on a project that requires that the vertical borders, which are currently calculated based on page size or the length of the page depending on which one is longer, but there is a slight issue.
I am using Firefox and for example if my noscript plugin kicks in and I for example allowed the script the vertical borders will have a gap at the bottom of the page.
That as an example, is there any way I am able to use javascript to detect a viewport change across multiple browsers?
I found somewhere watch() but was unable to find solid documentation on it and what browsers support this. Is what I am trying to do possible? Is watch() the proper way? If so, can anyone point me to some documentation, if not, what should I be looking at?
window.onresize is the event you're looking for, I think. Here's a link: https://developer.mozilla.org/en/DOM/window.onresize
However, you should be able to get full-height elements using only CSS, and then you won't need any javascript
Maybe you can solve this problem with Media Queries and window.matchMedia
https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/