http://stackoverflow.com does this, as well as www.ancestry.com. How do these sites keep from showing the mobile layout on a desktop when resizing the browser window if they don't have a separate subdomain? With my understanding, media queries will resize the website according to the viewport, but the both StackOverflow and Ancestry only resize to a certain point - on a phone the layout is completely different. Any help with this? I'd like to know how sites like the examples given achieve this.
Technically it's done by forcing a min-width on your document, which will incur horizontal scrolling below that size, with:
html {
min-width: 1000px;
}
But you should only deliver such CSS if you a have a 100% guarantee that this site will be served only to desktops. That can't be applied to mobile devices. Showing the mobile layout on desktop if a user resizes the window is perfectly normal. It naturally adapts to split screen mode situations.
I should probably make this a comment but they look at the device width, not the viewport width in their media queries and javascript. (I'm sick and don't feel like writing any more). There are also services available that can help you detect what type of device there is. However, these services can be slow and pricy sometimes. More often not worth the effort.
You can detect if your viewer is a mobile or a PC, then load different CCS files.
One way you can detect if there is a mobile is by javascript UserAgent BUT it is not very effective.
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// is mobile..
}
I haven't tested this recently, but there is a 'mobile' device specifier:
#media mobile and (min-width: 400px) {
.col { width:50% }
}
#media mobile and (max-width: 400px) {
.col { width:100% }
}
That'll work on mobile devices, but not desktop
I deployed the same scenario on a WordPress site using "mobble pluging" which simply detect the device then generate a HTML version for mobile, tablet or desktop.
Related
Here is the result when i reducing browther width to 740px. No scrollbar;
Same width but in chrome device toolbar
Now scrollbar appears.
This happened because i'm using negative right margins in some blocks, but i also using
body { overflow-x: hidden }
to prevent scroll. It works perfect until i turn on chrome device toolbar. What is the reason of this behavior? Should i don't use negative margins?
I was having a similar issue, and found an answer that may help you here.
For me the issue was the Media queries I was using looked like this:
#media only screen and (max-device-width: 600px) {...}
The -device- part of the selector, ensures your CSS is only being applied to mobile devices. Consequentially, the chrome device toolbar is used specifically to test CSS on mobile devices, which is probably why you are seeing the css applied properly there, but not when you resize your browser window on its own.
Try removing -device- from your media queries to instead look like this:
#media only screen and (max-width: 600px) {...}
Which should apply your CSS changes on both mobile devices and desktop.
Also make sure you have the following code in your HTML header, to ensure the viewport is configured properly:
<meta content="initial-scale=1.0, width=device-width" name="viewport">
Hope this helps!
chrome tool is for mobile device testing. it actually display mostly same in mobile device. without chrome tool it will display for desktop browser compatibility.chrome tool
so chrome tool actually gives the view mostly same as mobile device.
for mobile view testing it's better to use chrome tool for responsive mode.
chrome tool uses User Agent.
The User Agent Type, or Device Type, setting let's you change the type of the device. Possible values are:
Mobile
Desktop
Desktop with touch
How does one go about creating a fully responsive site (ie. 'fluid') that doesn't end up displaying the narrow "mobile" version on a tablet? (Usually the mobile version of a website is designed with thumbs in mind. It's very basic, usually single column, and isn't really suited to larger mobile devices like tablets.)
Even if you've designed everything to scale gracefully to every width, you still need the viewport setting to tell a user's phone to display the content at the right width... but this setting appears to also be honoured by tablets, too.
I realise you can use a detection solution (like Mobile Detect) but then it's not really fully fluid (although I suppose you could use Mobile Detect to insert a viewport meta tag if a mobile phone is detected). Is there a better way to get tablets to display the desktop version?
I feel like I'm missing a very obvious trick!
How it should work when adopted into the CSS standards:
Use #media queries in CSS, along with the #viewport CSS tag, instead of the meta viewport tag. There's a good explanation of how to do this here:
http://www.html5hacks.com/blog/2012/11/28/elegantly-resize-your-page-with-the-at-viewport-css-declaration/
An example from the above link:
#media (max-width: 699px) and (min-width: 520px) {
#viewport {
width: 640px;
}
}
You could use this to set different viewports on narrower and wider devices.
But for now, seems JavaScript is the only way to do it:
You can listen to the onResize event and check the width of the screen, and then adjust the viewport meta tag in the DOM accordingly.
See http://www.webdevdoor.com/responsive-web-design/change-viewport-meta-tag-javascript
Use media queries for different sized screens, ie: small(phones), medium(tablets), and desktop versions. You will only change the content thay needs changed in the queries. Then also set a meta tag with the viewport set at 1.0. Search around for media queries, there's a lot of information of there. Good luck!
Web page responsiveness with APPLE devices
i have various web pages ,that are responsive using various media queries that are working for various and operating system except apple devices and os(ios,ipad,iphone)
Now my pages are not responsive with apple devices.I have used
but still it is not working.please suggest me some way.
There is actually no difference in regards to the responsiveness on different platforms. It doesen't matter which browser (e.g. Safari on Apple devices) you use. Unless it's an antiquated version of Safari.
Maybe you have coded your media query wrong? Here is an Example how one should look like:
#media all and (max-width: 1200px) {
/* your css here */
}
In this example your css will take effect when the browser window is less than 1200px wide.
Hopefully this helped you a little bit.
I am coding HTML newsletter, I have to code one file that once sent it detects device if it's smartphone or PC. If PC it shows 600px width and for smartphones it shows 300px width.
So how should I set the width property so that it looks as per the width mentioned above.
You are looking for CSS Media Queries, here is a basic solution that may suit your needs:
/* ALL (Fallback), this will be used by browsers that don't support CSS Media Queries */
#container{width:300px;}
/* Screen more than 600px in width */
#media only screen and (min-width: 600px){
#container{width:600px;}
}
/* Screen less than 600px in width */
#media only screen and (max-width: 599px) {
#container{width:300px;}
}
More examples here: https://github.com/dhgamache/Skeleton/blob/master/stylesheets/skeleton.css#L79
It is very bad practice to use width % because if there are images within the page these will not be effected by this in most browsers. There is no proper way to code an EDM for both mobile devices and computers yet. Email clients and web services are just not up to par for this.
In my opinion, if you want to make it user friendly for both devices then you should be creating content fields similar to that if the windows 8 interface so that it will still look good on the computer and will have a decent look on a mobile device.
So lets take a look at what mobile devices support Media Queries. It is a HUGE hit and miss in this area.
Supported:
Android Mail (very buggy), Iphone mail and Ipad mail (>=320px <= 480px).
This does come with the risk of not having many elements displaying correctly still because it is relatively new still.
Not Supported
Android Gmail, Iphone Gmail, Ipad Gmail and Blackberry 8000
The only real option to go with for EDM's is to keep them static meaning you should never try and make it fluid. EDM's basically have a set amount of info in them and images then get sent so there is no need for the widths/heights to be fluid. Doing this only runs the rist of something breaking in another browser or email client.
I'm using the Semantic Grid System to build a responsive site. However, something isn't quite right with the media queries that should obviously kick in once it hits a particular screen size.
I'll reference what i mean with their example on the website : if I view this on my iPhone for example, given that it is supposed to adjust to a single column structure on a mobile device, it still throws out the web version of the page. That is true for both Safari and Chrome on my iPhone. However, if I use the RWD bookmarklet to check it's appearance at different resolutions it appears as expected for the mobile resolution. Also, ironically, if I resize the page in Safari on my desktop it also adjusts accordingly once I get down to the approriate screen size, but not in Firefox.
The media query that it uses once it hits 720px is
#media screen and (max-width: 720px) {
#maincolumn,
#sidebar {
.column(12);
margin-bottom: 1em;
}
}
and I might be wide of the mark here but I think that must be the issue. But given that this is directly from the semantic.gs website I don't think I have the expertise necessarily to question their own code.
Any idea what the problem might be?
The behavior that you describe can be the result of not using the 'viewport' meta tag in your markup:
<meta content="width=device-width" name="viewport">
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/