I build a react step by step form using material UI, I don't understand why I'm getting this behaviour when comes to responsive:
It is like eveything goes tiny. How can I properly make it responsive? Thanks!
This is the desktop version:
Use the viewport meta tag to fix that issue on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1">
Put it inside the <head> element in your index.html.
The attributes supplied in the content above is very basic so if you want to add more configurations you can use the other attributes specified below.
Other attributes that are available are minimum-scale, maximum-scale,
and user-scalable. These properties affect the initial scale and
width, as well as limiting changes in zoom level.
See MDN docs for more information.
Related
I was facing this issue. When I change browser size, it works well but when viewed on real device, it was not responsive and instead showed the shrink-ed version of webpage.
Here comes the "viewport meta tag", which is very important. Adding this below mentioned one meta tag will resolve the issue.
<meta name="viewport" content="width=device-width, initial-scale=1">
For more details view the below tutorial:
http://webdesign.tutsplus.com/tutorials/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972
I have an AngularJs mobile web application.
I use this meta tag to give the application its mobile look and feel.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
But in my application, I have an IFRAME where I want to display some content that is so big, that I would like for the user to be able to zoom on the content.
According to this: Allow zooming within iFrame but not on page in iOS that is not possible when using the above meta tag.
But then I discovered this component from Kendo: http://demos.telerik.com/kendo-ui/mobile/view/zoomable.html
Does anyone know how to use it together with AngularJS?
(I have a library called angular-kendo.js that I use for datepicker and combobox)
I got no replies.
So I resolved my problem by using a library called hammer.js.
Here is a good article: http://creativedroplets.com/html5-and-multitouch-hammer-js/
I'm building an app for mobile and desktop. There are some assets that I don't want to show or to load when on the mobile device. Using the Bootstrap's responsive design there is a tag called hidden-phone which is used to hide assets when on the phone. However, they appear to still be loading in the background and using bandwidth. Is there a way to prevent this?
I've come across the same issue with Bootstrap Responsive Utilities. The problem is that browsers will load all the HTML images first, then apply the CSS rule that Bootstrap uses which is display:none for the particular element that you've told it to hide.
One possible solution is to avoid using these utilities and instead, display the images using the CSS background-image property. Then, you can choose the same screen breakpoints that Bootstrap uses with their Responsive Utilities or make your own. Below is a simplified example that I've used in the past (set of images for mobile, and a set of images for everything else).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
#image {
background-image: url(largeimage.jpg);
}
#media only screen and (max-width: 480px) {
#image {
background-image: url(mobileimage.jpg);
}
}
</style>
</head>
<body>
<div id="image"></div>
</body>
</html>
You can find more info about Bootstrap breakpoints here: http://getbootstrap.com/css/#grid-media-queries
Are you including the viewport tag in your header?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
If not, you are probably rendering to 1024px wide, which will affect the output. Also, the sizing is based on screen resolution, not the type of device in use.
If you want to interrogate the browser more, this needs to be done with JS. I do this in a few places, and inject classes into the HTML element for use with device/browser specific targets in a limited fashion. You may want to look at Modernizr as well.
Given the comments below, and that you are targeting an iframe you do not want loaded for mobile browsers, I would suggest using JavaScript to test for a non-mobile platform, and inject your iframe via JS, rather than using Bootstrap to "hide" the content.
I'm busy developing a portfolio website. This website should behave responsively, ie: the website should be fully displayed when browsing on smaller screens.
I have added the meta viewport tag, but it does not seem to work. At the moment you need to scroll horizontally to view the full content. I want it to be initially scaled to the width of the viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
I guess I am missing something, but no clue what..
I was having all kinds of problems with viewport. Finally I just removed all traces of that stupid thing, and everything seems to scale correctly now. It might be that current mobile browsers are smart enough to scale without use of viewport. Of course I am using media queries too.
I'm working on a mobile site that needs to allow the user to pinch to zoom the page. When I add the meta viewport tag below, and many variations of it, the page does not allow zooming.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=1">
If I remove the tag all together I get the page to allow zooming, however it's initial zoom level is very small and almost unreadable. Yes I understand I am allowing the user to zoom, but the initial page should be readable to most humans, not something around 5px font-size as it is now. Any help on what the issue with the viewport settings need to be to work would be great.
I've never seen "user-scalable" have a value of "1". I believe the default is for it to be on, so try removing that portion all together.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">