I'm trying to make a site that will be responsive on mobile devices but not on desktop computers.
I created a media query with the following breaking points: 320px, 321-480px, 481-680px, 681-778px, 779-1280px. The problem is that these apply to resized browsers on desktop computers too and display the mobile version. I want it to ignore these breaking points and display the desktop version of my site regardless of window size.
Is this possible? Thank you very much for an answer!
It doesn't make a lot of since to make a responsive site that is only responsive for mobile. Maybe use a server side script for device detection and make two separate sites for mobile and desktop.
Related
we have a mobile application developed using Kony. We are trying to port the same to desktop version. Everything goes well but there are small challenges wrt UI i.e., responsive UI. Since I am new to Kony please guide me if there is a way to include media queries in a Kony application or what could be trick to make the app responsive on browser.
Thanks.
Kony does not currently support media queries to say "for screens of this size use this css rules". Remember in Kony your styling is done with skinning, not CSS3. Skins do translate into css for web apps, but that's a different story.
In Kony the approach is different. You design your forms for different screen sizes based on the type of mobile device: Mobile phone, tablet, desktop, watch, etc.
If you come from a web development background like I do, you might even be expecting a grid system like in Bootstrap or Foundation. But bear in mind that the real value of responsive design is not having to worry about the resolution of the screen, except Kony already gives you this through the use of Dp units instead of pixels. So the same mobile form design will adapt to any mobile device resolution. The same tablet form will adapt to any tablet resolution and so on.
For different device types, the premise is that your desktop and mobile screens will most likely be very different, or even start alike but evolve differently over time.
So the solution is to just copy your form from the "Mobile" subtree (right-click>copy) and paste it under the "Desktop" subtree. Then you'll be able to edit them independently.
I hope this helps.
Edit:
Starting with Visualizer V8 SP2 Kony does support Responsive Design.
I'm currently developing a website and am using media queries to adjust the layout.
However, I have noticed that I need to go into Mozilla's 'Responsive Design View' to get an accurate representation of how the layout would resize typically on mobile devices.
Resizing the browser window does not always have the same effect. What is the difference between these two?
Thanks
Mozilla Responsive Design view adapt to different screen sizes to provide a presentation that is suitable for different kinds of devices, such as mobile phones or tablets. Responsive Design Mode makes it easy to see how your website or web app will look on different screen sizes.
Resizing the browser can have the same effect but is less convenient and affects the tabs as well.
Therefore the Responsive Design View is a convenience that you should take advantage off instead of resizing the browser itself.
Respnsonsive design view of mozilla serves the same purpose of just resizing the browser itself.
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'm just starting out in web design/CSS so my current knowledge is limited.
With that in mind (this may be very easy for pros to fix), does anyone know why the Facebook iframe on this website won't stay within the sidebar on mobile devices?
http://www.northeastimage.co.uk
It looks great on desktop browsers but on the iPhone for example sits out of the sidebar over the margin sticking to the far right of the screen.
i would go for a user-agent to look trough your css and html, its a cross browser look also support phones and tablets it lets you "tell" the browser that your a phone tough your on your desktop
easy to debug while using it, i pref user agent for chrome get it here
Get strings to view from more viewports than the standard amount that are embedded in the program
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.