Im working on a website that im trying to make responsive.
So far , it works on desktop and mobiles phones (iphone , galaxy s4..ect)
Im having a hard time trying to make the website, when its on tablets (ipad , nexus 7 ..) look like its on a mobile phone.
My website is here - http://mk18.web44.net/index2.php
you can use http://quirktools.com/screenfly/ to see what I mean. Change the setting to a mobile phone like iphone. Thats what I want it to look like on an ipad.
You can look through the css - http://mk18.web44.net/css/styles.css
Thanks
For what I've seen, it seems to me that you are trying a bit too hard.
In order to make it like for iphones, you have to make the media query of #media(max-width: 768px) with the same instructions as the #media(max-width: 360px).
If that's what you want, my advice is to remove the #media(max-width: 360px) completely and just leave the #media(max-width: 768px) - the css instructions within will only be applied for devices smaller than 768px in width (this includes iphones, and other phones).
Also, you should do some clean up. Css code will be parsed from top to bottom, so css instructions without any media query (the #media bit) will always be applied in all devices, until there is an override. One can create as many #media queries as needed, but that doesn't mean you should.
With the right css foundation, you can accomodate most devices without media queries, using them only to reorganize content and user interface just enough so that it remains usable.
Hope it helps.
Related
I'm doing a mobile-first approach but now I need to target desktop browsers only to style the scrollbars in chrome.
#media (min-width: X) isn't what I'm looking for, I really want to target the device
#media not handheld doesn't work because iOS and android think they're not handhelds
I know that #media only screen should target mobile devices but what is the opposite? The closest I came was #media not only screen but that doesn't work.
EDIT: To clarify. With mobile-first I mean that I don't want to style the scrollbars for all devices and then make an exception for mobile. I want it the other way around: mobile should be the default, desktops are the exception
EDIT 2: More clarification. I'm not looking to target desktop because of a breakpoint in size, I want to target capabilities and/or behaviour. For example, using the :hover selector on mobile is bad because touchscreens don't have mice but they DO activate that selector when you tap an element and then never de-activate it until you tap something else. They treat it as :focus. So I would not want to declare that except for desktop (again, desktop should be the exception here, not the other way around).
I am thinking to create my website in Wordpress. Previously, I did projects that were for other people but now I want to design my own website. I am currently focusing on the issues I have faced before and want not to repeat them this time.
The only issue is of responsiveness. I have faced issues for mobile device and later on have solved them after a great pain. But now as I am working fresh, I want to ask whether is it possible to make website responsive when it is under construction or only after the complete building of the website.
If there is a way to automatically make my website responsive then kindly discuss. If we can somehow make the website responsive at the time of creation then my work will be lessened and I can focus on other functionality of my website. If any one have any solution to my problem then kindly tell me.
You can get started with something like bootstrap or skeleton. These are (free :D), light templates and include responsiveness.
Skeleton: http://getskeleton.com/
Bootstrap: http://getbootstrap.com/
You can also use media queries if you want to make your site responsive yourself.
Media queries tutorial: https://css-tricks.com/logic-in-media-queries/
Good luck! :)
You can use a CSS framework such as Bootstrap to do this. That will automatically make your site responsive by default (in most cases, limitations might apply).
It means you have to build your website with Bootstrap though, so you have to do this while building the site, not afterwards.
The only way to make the website responsive is to buy a responsive theme. But that will not be 100% successful considering them customization. If you are thinking of making the website responsive plan it well and the build from the beginning. If the HTML is properly structured then the working time and issue fixing will be easier and less time consuming. If you need more details please comment
I known that this has an answer but still I thought I can give a contribution.
In the first place you talked of wordpress. Since you are going to making your website in wordpress then it is recommendable to choose a responsive theme for your website which is going to significantly reduce your overhead.
Also you can use media queries to make a website responsive like look at code below
/* ----------- Non-Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
You have to give screen size for various devices like laptops, ipads etc. There is a whole article here https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Apart from media queries you can use framework like bootstrap , skleton which will greatly reduce your overhead. All you have to do is to add its files and use the classes of framework which already has properties associated with them.
I've seen other questions, but no answer has helped me yet.
I have set a media query to:
#media only screen and (max-device-width: 767px) {
/* css here */
}
which I want to make the page on phones render the same in both landscape and portrait.
on my 2 available iphone 5's - a 5 and a 5c, portrait works great, landscape totally ignores it.
i've tried the specific landscape orientation tags, and that also fails.
i've also tried setting the max width to 1500px just in case of some retina thing - and that also fails in landscape.
i've run the css through lint - and that didn't find anything all that bad, even. so i think the css is ok (if not lint-perfect).
the site is locked for now till i hear back from my client - so posting a link won't help. But has anyone else seen this issue, and is there any fix out there? When i get back home tomorrow i can try an old Android phone and see what that does. But for now it's driving me crazy!
Do you have to use max-device-width? because if you change it to use max-width you will keep all the styles up to that size.
The difference between them two is max-device-width if you view the site on a browser and shrink it down it doesn't become responsive but if you use max-width it gives the site a responsive feel when shrinking the browser.
#media all and (max-width: 767px) {
css in here
}
I prefer using max-width.
The only case I can think of we should use max-device-width rather than max-width is when we need to keep something consistent even when browser window has been re-sized.
I'm having a problem with my media queries where I want to target phones, tablets or computers. the problem is that today some phones and tablets have a high screen resolution.
I can´t seem to find a proper combination to achieve this. Could you help me and post the queries that you guys use for your websites? I've been working on these for days, to no avail.
Should I use some JavaScript library for this?
UPDATE:
I found a very good jquery library that seems to be very reliable with today's devices. And even though it is not being developed anymore, I found that it successfully detected all the devices tested, regular phones and tablets, high ppi phones and tablets, and desktop or laptop computers.
Try it out, and see if it works for you too
Categorizr
There is no way to make everyone happy. For our upcoming responsive website we used a few breakpoints
768px
1024px
1280px
1920px - is our biggest, we cut off at this point
We have our server output classes on the body to detect classes (can be done with modernizr I think, never used it), for example, .iphone, android, .mobile, .phone, .tablet
So if you are using an iphone we would get
.iphone and .phone on the body tag
For some pages we also defined breakpoints at 320px and 480px
We use jquery for everything, just a warning, jquery runs fairly slow on Samsung tablets, man do we hate that device
Example of media query (we use LESS)
// normal styles
#media only screen and (max-width: #maxTabletWidth) {
// less than 1024px styles, yes I know 1280px is also tablet
}
#media only screen and (max-width: #maxPhoneWidth) {
// less than 768px styles
}
Good luck
Having built quite a few responsive websites, I find that instead of specifying 'x' width for a desktop monitor, 'y' width for a tablet, and 'z' width for a mobile; it's better to use breakpoints to ensure your site works across all browser sizes.
That said, a good site to look at if you're interested in various screen sizes is screensiz.es, where you can see popularity stats as well as their physical pixel widths.
Being device agnostic means that you won't have to readapt designs, and builds when Apple, or Samsung release their super thin, or super chunky devices.
A final suggestion to aid the functionality on the variety of devices would be to employ something like Modernizr to detect touch events.
Hope that helps.
I wonder if you are using the right tool for the job. Responsive design lets you stop trying to target specific devices or guess what the specifics of the next iPad / smartphone will be.
Set the break points to manage the layout of your design at different viewports and you are 90% done ;)
Let's say I just want to target every tablet and phone, regardless of size, is there a media query for this? Is it possible to do this without specifying a size? Or is using a size the only way to target mobile devices, and not desktops?
I've been struggling with this for a few days, but a good way to check for handheld devices is the max-device-width. Desktop pc's don't send this to the browser, but most (if not all) handhelds do use this.
In my case I wanted to show a compressed version of the site on all devices (including desktop) when below a certain width, for which I used
#media all and (max-width: 640px)
But a certain overlay popup that used position: fixed had to be changed on handhelds only (because the css property works in all desktop browsers but not on all handhelds). So for that I used an additional rule:
#media all and (max-device-width: 640px)
In which I target all handhelds below 640 but not desktop browsers. Incidentally, this also doesn't target iPads (which is how I wanted it) because it has a higher device width than 640px.
If you just want to target all devices just pick a low min width (1px) so that it doesn't exclude any device regardless of width.
In the CSS3 spec, #media handeld is mentioned but it has perhaps no browser support.
So, no.
However, you might find this site useful, it explains other some media query techniques for mobile.
I don't think you'll have too much luck with a pure css approach. You'll want to do something along the lines of the modernizer.js approach and us JS to detect device and append a class name to body based on that.
What is the best way to detect a mobile device in jQuery?
Then include that class in your media queries to special case mobile devices of varying sizes.