So I've been working on a website for quite some time now and I have many elements that simply don't work with phones but I've noticed if I use the option desktop version everything is scaled and centered correctly. Now I want all my users to automatically check this option via javascript or something until I get the mobile version of the website working.
I'm not a pro, so please keep the answers simple. Thanks!
Use media queries for that. There is a nice MDN Web Docs page that you can check. To check if you're on a phone you can use the max-width CSS property.
Example:
If the browser window is 500px or smaller, the background color will be lightblue
#media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
Hope I answered your question.
I explained it poorly. What I was trying to do is enable the checkbox in the mobile browser's menu that requests the desktop version of the website.
Instead, I have now improved my CSS skills and can make websites behave correctly on lower DPI devices.
Related
Consider the following site: 200minus.com
This site looks good on both a mobile phone and a desktop. It's as if when you view the site on a mobile phone, everything is appropriately shrunken. Where in the source code (HTML/CSS/JavaScript) is this being dealt with (or is this typically dealt with)?
In the CSS as media queries.
You can adapt the layout of CSS styling, depending on what size the browser window it's being viewed with is.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries, and
the official W3C documentation: http://www.w3.org/TR/css3-mediaqueries/
Theres 2 typical approaches to page design in mobile/desktop situations.
Adjust the page to suit the size of the display at load.
or...
Make the page respond to it's size dynamically( This is referred to as responsive design).
It is considered good form to use responsive design, as it has obvious advantages for screen resizes. Such as if a tablet/mobile was rotated or if a desktop user resized their window.
A good design should be implemented predominately in css as it is the fastest part of the page to update/ evaluate, and is simpler to implement than modifying the page style than JS. Proportional layout and forward planning help considerably when it comes to producing a layout that works well on many screen sizes and many guides will instruct you to design for mobiles first, then adjust for desktop sites. Personally I try to think of them as one part that is never a fixed size.
The bread and butter of responsive design is media queries; they allow you to only active certain css rules under one or more conditions. For example:
#media (min-width:650px){
.about_tablet{height:175px;}
}
#media (min-width:650px) and (max-width: 675px){ /* both conditions must be met */
.about_tablet{height:175px;}
}
#media (min-width:650px) , (max-width: 675px){ /* one or both conditions must be met */
.about_tablet{height:175px;}
}
Another very useful trick is viewports
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width" />
They can be a little strange, behaviour isn't uniform across older mobile devices and they don't work at all on desktops, but they are quite useful. You can force a page width and scale the page on a pixel by pixel basis (800 px image on a 400px wide screen for instance). Prevent the user from being able to zoom in, or limit the zoom. Most useful is the width=device-width" which prevents the horrible zoomed out effect you get on non optimised webpages when you view them on a phone.
If theres a more specific concept you want to talk about I'm happy to help, a vast majority of my work is done for mobiles.
This is simple Bootstrap. Just try it out! I think it's really good. Also mentioned in the answer above this is everything done with CSS. For example this:
#media (min-width:768px){.container{width:750px}
}
#media (min-width:992px){.container{width:970px}
}
#media (min-width:1200px){.container{width:1170px}
}
When the width is smaller than 992 px the container will be set to 750px.
Greetings
In CSS using media queries, as explained here:
http://css-tricks.com/css-media-queries/
For example:
#media screen and max-width:600px { /* CSS here */ }
Is a common brakepoint that I use.
For some specific handling I've found I have to use javascript or jQuery to really get the effect I want, but generally CSS media queries and some intelligent and creative use of showing/hiding objects with the display property will get you 99% of the way there.
My webpage is working fine while displaying on my 1920x1080 monitor.
But when I change to use 1024x768 monitor.The content of my webpage will be too big.
I used CTRL+Scroll to resize my webpage to 65% and everything seemed to be good!
Is there any code solution like CSS, javascript or etc.. to resize my entire webpage to 65%?
PS:I use Joomla to develop my website. Maybe an addon?...
.wrapper {
transform:scale(0.65,0.65);
-ms-transform:scale(0.65,0.65); /* IE 9 */
-webkit-transform:scale(0.65,0.65); /* Safari and Chrome */
}
You could try wrapping the entire site in <div class="wrapper"></div>
Edit: This would not be best practice, but does answer your question. Ideally you should create your website using % based layout so that it re sizes automatically to any screen resolution.
I have my site HEAVILY modified via #media queries to display very slimdown'd on mobile phones. However, my users are asking for the desktop version of the site (available via a link).
To go a step further, the desktop site itself also gets modified by #media queries depending on resolution. I was thinking of picking one 'desktop' resolution, say 1440x900 and forcing the mobile phone to display at that resolution?
Is this possible, maybe through JavaScript? Alternatively, can these #media queries be disabled altogether?
Thanks!
I had the same issue with a client. But the problem was there were 120+ CSS files contained the media queries. So what I did is, set the viewport width. I have used this snippet on that site and working fine. Using this, even you can give the option for the users to toggle between responsive design and non-responsive design.
$(document).ready(function(){
$('meta[name="viewport"]').prop('content', 'width=1440');
});
Note: 1440 is your preferred screen width.
Hope this helps :)
I would add a class to your <html> or <body> such as class="force-desktop" and then on your media selector add
#media () {
body:not(.force-desktop) {
//styles
}
}
or something similar
The solution of IJas without JQuery looks like:
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', width=1440);
Its easiest to put any styles that may need to be disabled in their own stylesheets, with title attributes to make finding them easier. They can be inline style or link elements to .css files.
function toggleSheet(title){
var S=document.styleSheets, L=S.length, temp;
while(L){
temp=S[--L];
if(temp.title===title){
temp.disabled=!temp.disabled;
return temp;
}
}
I have a website with some content. Based on the users screen resolution i want to show different content so that mobile devices will have some other content, but the rest of the site will be the same. I did some research, and it seems like the only possible way is with javascript. I code PHP most of the time, so i really suck at javascript, so it would be nice if someone could provide me with a simple script.
What i need is a javascript function like this:
if (screen resolution < X x X) {
show some content...
} else {
show some other content ...
}
If javascript is off, it should just show some other content.. :) I can install jquery if it helps. Thanks
It would be nice with examples for the html code too.
you should NOT detect if the user is on a mobile device with javascript. i recommend you this in PHP. you can use [$_SERVER'HTTP_USER_AGENT'] and then simply parse out the string to see what kind of user agent it is. I am actually implementing this same concept right now.
you can also use this class Mobile Detect
include("Mobile_Detect.php");
$detect = new Mobile_Detect();
if ($detect->isMobile()) {
// any mobile platform
}
Check out CSS at-rules. They allow you to specify maximum and mimimum widths for a "namespace" of CSS rules, inside which you can have different rules for smaller screens. But be careful when using those, since IE doesn't like to support good things.
#media screen, projection and (max-device-width: 800px) {}
#media screen and (max-device-width: 300px) {}
On a project I'm working on, we actually redirect to a mobile version of the page if the user-agent contains certain keywords(check out the HTTP headers from JS), and use a different stylesheet completely.
You can use css media queries to target different screen resolutions. eg:
#media only screen and (max-device-width: 1024px) and (orientation: landscape) {
/* iPad in landscape orientation css */
}
#media only screen and (max-device-width: 480px{
/* iPhone css */
}
More info:
https://mislav.net/2010/04/targeted-css/
https://webdesignerwall.com/tutorials/css3-media-queries
you should try CSS media queries instead
In don't know from PHP but in .Net you can kinda detect that they are a mobile visitor and then you can redirect them to a mobile section of the site.
Then all you really need to do is write the small site re-using your existing web controls etc. Again, unsure if you have that concept in PHP but I imagine you would.
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){ /* */ }