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
Related
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 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/
Can anyone help with HTML fix for Mailchimp.
I have created a code, that is responsive, and when I test across devices, on some mobile (Android , Nexus phone) devices e-mail is, when opened zoomed in by default so I need to pinch zoom out so I can see whole newsletter, while it is good on iPhone (native mail app, gmail app) and on Android gmail app.
I have already added
-webkit-text-size-adjust:100%
and
<meta name="viewport" content="width=device-width"/>
Thanks in advance
Specify initial-scale=1.0 in the viewport meta tag. For example:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
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">