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">
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 created a fluid site for a client using Susy 2/breakpoint However they want to change the site to show the mobile layout less than 320px and then the desktop zoomed out ( like loading a fixed width site) on any device above 321px.
Is there a way to change Susy setting so I don't have to rewrite it fixed width and should I be aware of anything in the viewport meta tags?
change your meta tag from
<meta name="viewport" content="width=device-width, initial-scale=1">
to
<meta name="viewport" content="width=320, initial-scale=1">
this will set the mobile layout(only portrait mode) at 320px and for the rest of the resolutions it will show desktop version of the site.
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/
Well, I can't release the URL for the site (not live yet), I was running into issues where the website won't scale to the device screen. For instance, I want the entire website to fit on a mobile, and tablet device without user having to manually scale it down. However, when you view the site, it's zoomed in. Below is the viewport tag I'm using. Any ideas?
<meta name="viewport" content="width=device-width, initial-scale=1">
There is no max-device-width value for width. It has to be only device-width. So it should look like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
I have a website which must be responsive for mobile phones. I've created it using my desktop. When I adjust browser windows it's working perfectly for mobile phone but when I check it on my real mobile phone: Samsung Galaxy S2 it's not responsive to the mobile view.
What could be the wrong?
You are probably missing the viewport meta tag in the html head:
<meta name="viewport" content="width=device-width, initial-scale=1">
Without it the device assumes and sets the viewport to full size.
More info here.
I have also faced this problem. Finally I got a solution.
Use this bellow code. Hope: problem will be solve.
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Though it is answered above and it is right to use
<meta name="viewport" content="width=device-width, initial-scale=1">
but if you are using React and webpack then don't forget to close the element tag
<meta name="viewport" content="width=device-width, initial-scale=1" />
Responsive meta tag
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">