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/
Related
I know I can use media query in order to make the design responsive. but I do not want to do that now. what I would like to do is when the user load the app on mobile, my react app detects that and display the app as desktop view on mobile.
You can change the meta link in the index.html to display a desktop version:
<meta name="viewport" content="width=1920">
Instead of the responsive version which is:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
you will find index.html in the public folder
i made a responsive web page with media query.
view on mobile device it auto zoom though i have not defined to zoom.
while used meta content "width=device-width" it looks like it is viewing on desktop browser after that user have to zoom out to see the actual view.
Use the below meta tag in head
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
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 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">
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" />