I have a problem with my web page not wanting to resize according to a phone's width...at least not the whole page.
The example of the page can be seen at: http://sibincic.bobr.si/index_table.html
If I try it on an HTC Desire which has a resolution of 480x800 it resizes it but not all the way.
If anyone has any ideas what I should do please let me know.
You must use that sentence in section, and use bootstrap responsive CSS.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
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 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">
Please check the page.
When opening the page, BlackBerry Bold automatically zooms in the page. While the situation is fine on iPhone.
I had tried
<meta name="viewport" content="width=1020">
<meta name="HandheldFriendly" content="true">
or
<meta name="viewport" content="width=device-width">
<meta name="HandheldFriendly" content="true">
but BlackBerry Bold still automatically zooms in the page.
BlackBerry Bold is supposed to act like how iPhone does. Is there a workround to this issue?
Can you try specifying the height and the width? Some thing like this,
Thanks
Naveen M
I am currently building a responsive mobile webpage.
My question is - when i enter the webpage on the phone i have to double tap it to look good - else its all way to zoomed in. Is there any way to prevent this?
webpage link
http://makeitweb.se/mobile/
I think your meta viewport tag should look more like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />