I have a general question regarding css:
i want to add media queries to adapt to different screen sizes. But how do I know what values to give the different queries if i cant see it on the respective screen size?
is there a way to do preview how my content will look?
You can google chrome's inspect tool by clicking right on a webpage and click the little phone icon in the top left corner to view your website on various device sizes.
You can enter Chrome's (or Opera's) dev tools and activate Device Mode to simulate different screen sices. I like to use the responsive mode that allows you to drag and resize to check the behavior across different sizes and the Media Query ruler that shows you the CSS break points.
Other browsers have similar tools, like Firefox's 'Responsive Design Mode' or Edge's 'Emulation', both accessed through Inspect Element.
Yet this simulations don't guarantee to behave 100% like the devices.
Most modern browsers have device emulators in their Developer Tools. For Chrome you can find the documentation here: https://developers.google.com/web/tools/chrome-devtools/device-mode/
For even more cross browser/device testing you can use: https://www.browserstack.com/screenshots
Still nothing beats setting up a device lab, where you can physically test on some of the most popular devices.
Hope that helps,
You can use tools like this, to test it in different devices size and resolution.
https://screenfly.org
Related
I have a question that I have searched for hours and can't find any solution to my issue.
I am trying to make it so when you resize the browser the mobile versions and break points don't show when on a desktop.
So when you're on a desktop you should be able to resize the browser to a point where you will have to scroll horizontally, rather than showing a mixture of desktop and mobile version. apple.com does it where when you resize the browser it only goes so small and you never see the mobile version. Which you shouldn't because you're on a desktop.
Here is the site:
http://www.avrs.com/
To recreate the issue you can resize your browser and at about 1000px it breaks and is ugly. You may also say that I am doing the display: none; wrong which you are welcome to inform me of how to fix.
Also I am familiar with the http://getbootstrap.com/css/#responsive-utilities. But they didn't seem to fix this issue either.
There are several techniques to achieve what you want. The easiest is to use CSS media-queries with specific properties.
Usually min-width or max-width are used for the CSS breakpoints to make your website mobile-friendly (Responsive Web Design). If you want to avoid this on desktop browsers you can use different properties with values specific to mobile devices:
min-device-pixel-ratio
min-device-width
orientation
This source will provide more relevant information: article on css-tricks.
Another question is: Why would you want to make your website unresponsive and not user-friendly like that? In year 2014 I (and pretty much most of the users) expect websites to adapt to the browser's window size.
Scenario: I really like browsing websites with my browser on one half of the screen and eg. chatting with someone or watching a movie on the other half.
Consider this point. I think it's better to improve your website so it works nice in all different resolutions because you can never assume anything about your users and their devices (smartphones, tablets, netbooks, laptops, desktops…). Nowadays I can easily get a smartphone with higher resolution than my desktop computer, or a laptop with a touch screen.
The devs at Apple are using max-device-width (plus other media query rules, like dpi, min/max width, etc.) to determine if the mobile version will be shown. Because desktops typically have a larger physical screen, the max-device-width rules will rarely be shown on desktops (but it isn't full proof, as shown below - You'd want to look at adaptive design for a separation between desktops and mobile devices...)
You can test this by setting your resolution to something much smaller. Here's an example on my Macbook Pro at 720px x 450px (via Display Menu) running Chrome.
I have created a responsive website which has a mobile.css with multiple sizes to suit most common devices. What is the best practice from your experience to ensure that each size I have specified in my mobile.css will format the page correctly on all devices.
What I am wanting to achieve is a stretching of elements to fit the page when within the specified min/max limits specified in mobile.css. Are percentages the best practice to achieve this?
Let me know if you need any more information.
The best thing to do is test it on each device. You don't need to have every device that there is, you only need a device with a fixed screen size. Also try to get devices with different browsers, opera, chrome, IEmobile etc. Thats the safest.
There are websites out there that can emulate device sizes and display your website in those scales, But they do not emulate the mobile browsers. See if you can get a couple devices.(Ask friends and family or co workers.) And test it on each size you can.
Best of luck
#Media Queries are best practice in my experience refer to this documentation and there are some really nice examples
When testing FireFox has a default User Agent Plugin that can act as different Browsers, You can also get the Web developer Extension which has a resize menu to show you the responsive versions of your sites. Google Chrome has similar plugins.
I'm working on making my site more responsive. If I decrease my browser width to its minimal width, is this a good substitute for testing what will happen on mobile devices?
I don't have devices such as the iPad Mini or Galaxy S2/3 but still want to make sure the site will look good on them.
Ctrl + Shift + M on Firefox(Windows)
Cmd + Option + M on Firefox(Mac)
If you want to test your designs locally, in the browser, you can use Web Developer Add-On which will give you an option to view responsive layouts
Also you get ton's of online website out there which will do the job for you like
http://mattkersley.com/responsive/
http://www.studiopress.com/responsive/
http://www.responsivedesigntest.net/
http://screenqueri.es/
If you are using media queries, then yes just resize your browser. You can keep an eye on the window size by using an inspection tool like firebug and checking the body width.
CHECK Responsinator: Help you to test site on different devices and different orientations
http://www.responsinator.com/
I would suggest finding browser plugins that allow you to resize your browser to specific browser dimensions. Then set up the common sizes using it...320px, 480px, 600px, etc, and/or whatever needed for your project.
For Chrome, I use Window Resizer.
I use your described method myself, it is not 100% accurate, some textual sizes could change slightly especially if you are using em or rems. If testing box layout and stuff like that it can be fairly accurate.
Another solution would be to use a service like http://quirktools.com/screenfly is a relatively good solution also.
The best solution that I also use is Browser Stack: http://www.browserstack.com/ It is not free however. Browser Stack also allows you to test different operating systems, different browsers, and a multitude of different mobile devices.
The best way to go is with the devices, but, if some or all the devices are not available then you will have to resort to some other ( good ) tools out there. Here are a few examples :
Testing Tool 1
Testing Tool 2
Keep in mind, these sort of tools will show you pixel perfect output and the user interaction/behaviors maybe different.
I'm newbie for developing mobile website. I very confused between two methods because I dont have any experience this it. Whats more better between two methods: css query when we using all of width device in css file or using jquery mobile that use php technique for differented user that use desktop or mobile [user->php?->mobile use jquery mobile/desktop use css standard]?
Many thanks for this answer
I will classify methods by their importance, from most important one to less important:
Client side detection
Using Modernizer javascript library to detect mobile / desktop environment
Server side detection
Using Modernizer Server or WURFL. Little complex then first solution but much more detailed (if you need more data about used device)
CSS media queries
Bad solution to detect desktop /mobile devices. Current mobile devices can have screen resolution equal to desktop platform
JavaScript based browser sniffing
Worst solution possible. Specially if you want to make distinction between smartphones and tablets.
To find more about this solutions, read my other article/answer with examples: https://stackoverflow.com/a/15055352/1848600
I have to post an answer in here since this comes first in search engines and accepted answer is not accurate.
There are two main concerns regarding responsive designs:
Content: Content should be restructured based on the width/height of the view port so the user can view the content without the need of constant zooming in and zooming out. This needs to happen solely based on the resolution of the view port regardless of the device. It could be a mobile device or a small window in desktop. This mainly involved the look and feel of the website and it is absolutely fine to use media queries. Even IMHO it is the best to use media queries to have the separation of concerns between your view and logic. No web designer likes to see random width or height showing up on their html elements during debug without knowing where are they coming from. Media queries will help you to resize the elements and show or hide them; however, in some situations you may need to move elements around; I usually do these using ng-if or ng-switch in angular js in combination with modernizer.
Functionality: If you need to turn on/off features based on the device functionalities, do not depend on the viewport specifications; use the vast libraries available in JS.
On a side note smartphone browsers seem to render at far lower resolution than actual device screen dimensions. Bust out a quick JS to show you your window resolution and run it on your phone.
Example: Chrome runs at 360x640px on my android screen of 1440x2560px.
I am trying to make my website resize on handheld divices but form some reason its not responding to the stylesheet.
If you take a look here: responsive design link and put www.sofiamillares.com as the site test, the top lines get cut off and everything looks super big.
Can some one please enlighten me on why is it doing that and what would be the easiest way to fix it?
This is happening because your design is not completely fluid.
Only your container div will adjust with the width (a bit)
To fix this quickly, you could
give your divs percentage widths, so they scale with the screen resolution
float your square boxes at the bottom, so they will stack on smaller screens
consider using media queries or some js device detection to target mobile devices and send them a modified css stylesheet.
Get some ideas here: http://mediaqueri.es/
As Jason suggests, creating a mobile specific version of your site is usually the best solution. You can then test the user-agent string for phrases like "android" and "iphone" and re-direct the user to your mobile site. There are libraries available for JavaScript as well as many server-side programming environments (PHP, ASPX, etc) which do all sorts of browser detection for you.
When building a mobile site, you'll of course want to make the page lightweight so it'll load quickly over a mobile data connection, and format it appropriately for a smaller screen in portrait orientation.