I have been doing some research on media queries and I understand the concept of mobile-first design.
I know, that there are lots of questions regarding media queries but none of them targets my specific question.
Also I understand the concept of structuring your stylesheets with media queries like this:
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { ... }
However I really need a way for my stylesheets to target only tablets regardless of the browser resolution (width & height). Checking the browser-width is simply not safe enough (and definitely not what I am searching for) in 2015 where some tablets have a bigger resolution than older desktops.
Here is a list of things I have tried so far:
I made a list of "common" tablet-resolutions and simply specified
detailed media queries. This approach failed after I found tablets
with 1024px width (which is the same as older desktop browsers).
I read a lot about media queries and found out that modern browsers (especially on tablets) sometimes ignore specifications like "#media only screen" and that most values of a media query are deprecated.
1.) Is there a safe way to target tablets regardless of their resolution with media queries?
2.) Is there any way to use JavaScript/JQuery to find out if the Browser is used on a Tablet (touchscreen)?
Maybe there is a certain css property OR JavaScript function that is only "triggered" on tablets (I am out of ideas)? Thank you for your help.
You can use this:
#media only screen and (min-device-width: 768px){}
For ref : Media Queries: How to target desktop, tablet and mobile?
Short answer: no.
I would say, what is a tablet nowadays? Some phones are so big that they seem more like tablets and some tablets are so small that they overlap the bigger phones market...
So I would say, go for feature detection, target the features that you are interested in, and the best way for me, apart from media queries, is Modernizr.
You can take a look at their custom builds page and literally pick the features that you are interested in (touch events? geolocation?), knowing that you got the support of a reliable, well tested library.
Related
pretty much i have made a website that looks great on desktop, but looks absolutely awful on mobile, so im going to write a version that is the same level of quality as the desktop version.
however i have no idea how to do this, i have looked it up and i have found one thing telling me to use the following code;
<script>
if ("ontouchstart" in document.documentElement)
{
// content for touch-screen (mobile) devices
}
else
{
// everything else (desktop)
}
</script>
i want to put html in where the comments are, but I dont know how too.
Any help?
You're going to want to write media queries in your css file. You might have to get creative with some of the styles that are currently on your site but this is generally how you would go about changing the look of a page for mobile devices.
#media (max-width: 767px) {
css styles that need to be altered for mobile go here!
}
You can also use min-width in the media query to apply stiles to large screens only.
#media (min-width: 767px) {
css styles that need to be altered for destop go here!
}
And also there are ranges.
#media (min-width: 360px) and (max-width: 767px) {
css styles for screens within this range go here!
}
You have to come up with a design for the mobile, not just trying to make it fit on the screen. You can achieve the responsiveness using CSS screen media queries. Media queries basically takes the browser current resolution (be it desktop or any devices) and it will automatically adjust the changes you made (like layout changes) based on what you assigned to the media queries. And you can also look up for CSS frameworks like bootstrap and tailwind, they have an amazing responsive/fluid component built in.
My Web application is meant to be used on desktop computers and also on computers that are connected to TV screens.
I would like to apply different styling in these two different cases, but simple media queries do not work here: TVs resolutions are even smaller than computer monitors, even though the screen is much bigger.
Is there any way to detect such a scenario and apply proper styling ?
there is a CSS media query to check if the client screen is a tv
#media tv
(instead of #media screen for a classic computer screen).
There is also #media projector.
Suggest to take a look at CSS Units, especially the ones beginning with v, which are relative to the viewport's size...
I've got my responsive website done with breakpoints setted up with #media queries. I've got couple of basic breakpoints
min-width: 1600px - for TVs and bigger resolution screens (that just center the whole page and make white margins on sides, nothing too significant)
max-width: 1024px - for tablets, there are many changes, especially because tablets has of corse touch screen, which desktops usually haven't. At all it looks pretty different.
max-width: 600px - for smarphones, there is also a lot of changes based especcialy on narrowing the content from two or four colums into one.
Now I found that might be a problem, because there are nowdays tablets which acts in the browser, as they have resolution width for example 1280px, but there are also still computers with width of monitor 1280px too, even smaller, so I can't change the breakpoint value for this.
I of course don't want the desktop version on tablet and tablet version on comuter, becase they're created not as much for resolution but more for the platform.
I know that there are things called user agents like WURFL, which seems to be perfect for this. But is there any way how to connect this value from WURFL (tablet, desktop, smartpohne...) with css #media queries.
For example detect in WURFL that the device is tablet and change the breakpoint value in CSS file, so it shows the tablet version, instead of desktop version? Or is there any other way with similar result as this theoretical solution?
There is no need identify the device, just use the right media queries.
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
I think you are looking for this
jQuery code to detect mobile devices
http://www.webtrainingcentre.com/jquery/scripts/jquery-code-to-detect-mobile-devices/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I'm looking for someone to steer me in the right direction. I have a functional web page that runs crisply on my 13" MacBook. The issue is viewing the web page at different sizes and how the elements get distorted. What kind of things need to be done to ensure it looks crisp and beautiful on any screen size. Does it require me to use percentages when detailing height and widths of elements or does it require some javascript.
I realize this is broad and all im looking for is someone to steer me towards what should be changed so I can get the site live.
Thanks!
General direction:
You want to check out media queries to make your design responsive to different viewing media. You will want to consider other meta tags such as ones defining the viewport size, but in general you can do it all with CSS.
Here are example queries that can wrap your custom CSS rules for each device size:
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {}
Obviously you will want to fill-in the CSS rules as needed to ensure your content doesn't get scrunched.
A good strategy is to design for small mobile application, then go bigger from there. That way you don't find yourself trying to cram way. too. much. into a small interface.
In general you can also use the float:left; property for your main layout blocks (instead of absolute positioning, etc) That way your sidebar, etc will float above/below your main content when the parent element is too narrow to have both side-by-side.
Also, yes. You can use percentages, etc to fill areas fluidly. Use background- properties instead of <img> tags. Hope that helps.
I guess you may take bootstrap as a refer!
It is responsive, and will display almost the same on different resolution screen!
So try something like this.
and if you want to make your site looks like the same on all screen, try precentage!(but not suggested!)
You will need css3-mediaqueries for responsive designs or fluid designs
We Can assign different stylesheets depending on browser window size.
You must know How to use CSS Media Queries & Using Available Space
Have a go here
What are CSS Media Queries
and how to implement them.
too
I thought of not editing my answer any more, but i have got some good points to change my mind From http://www.webmonkey.com/2011/06/tips-tricks-and-best-practices-for-responsive-design/
Use #media to scale your layout for any screen, but remember that
this alone isn’t really responsive design.
Use liquid layouts that can accommodate any screen size. Don’t
simply design one look for the iPhone/Android, one for tablets and
one for the desktop. Keep it liquid, otherwise what happens when
some new, intermediate screen size suddenly becomes popular?
Roll your own grids based on the specifics of your site’s content.
Canned grid systems will rarely fit the bill. The problem with
canned grids is that they don’t fit your unique content. Create
layouts from the content out, rather than the canvas (or grid) in.
Start small. Start with the smallest size screen and work your way
up, adding #media rules to float elements into the larger windows of
tablet and desktop browsers. Start with a narrow, single-column
layout to handle mobile browsers and then scale up from there rather
than the other way around.
Use the Respond or CSS3 Media Queries JavaScript libraries to
bootstrap #media query support into older browsers that won’t
otherwise know what to do with it. Starting with the smallest screen
and working your way up means it’s the desktop browsers that need to
handle #media, make sure older browsers work by using polyfills like
Respond.
Forget Photoshop, build your comps in the browser. It’s virtually
impossible to mock up liquid layouts in Photoshop, start in the
browser instead.
Scale images using img { max-width: 100%; }. For very large images,
consider using something like Responsive Images to offer the very
smallest screens smaller image downloads and then use JavaScript to
swap in larger images for larger screen.
Embrace lazy loading. There may be items on your site, auxiliary
content that’s nice to have, but not essential. Load that content
using JavaScript after the primary content is done loading.
Forget about perfect. Even with these suggestions you’re still
leaving out users who have old browsers with JavaScript disabled.
Such users are increasingly rare and if they see the mobile layout
on their desktop, guess what, it’s not the end of the world. Your
site is still perfectly usable.
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.