I have installed a Magento 1.9 and found that it is a responsive layout whcih is really good. But I want to disable responsive feature.
Is there any way if I can disable the responsive feature in Magento 1.9.
I tried putting following values in meta tag but it didn't work. I just want website to display desktop layout on mobile devices.
<meta name="viewport" content="initial-scale=1, width=1280, maximum-scale=1" />
Try adding the css...
body {
min-width:1280px;
}
Bear in mind that width is larger than most non-widescreen monitors, however.
I'd probably then remove the maximum scale from your viewport as I think that would prevent someone zooming in, thus making your site unusable on a smart phone.
I'd then try just:
<meta name="viewport" content="width=1280" />
for the viewport.
Related
Seems to me a lot of solutions from making the text 16px or using js to check if the phone is an iphone. Changing the style is not ideal and checking if it's an iphone seems a bit messy and over time more devices/browsers may have this behaviour.
Is there a simple rule that just prevents that default behaviour entirely no matter the device?
You can disallow your website to scale. That is if your page is properly designed for phones though. Otherwise, I would not recommend using this solution.
To prevent your mobile page or form fields to float around add or set the following viewport in your <head></head> to:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
I have been using the meta tag for viewport, like Apple says on their own developer page, now for years on my responsive designs. As of recently my iPhone is now able to zoom in even with the following
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width;" />
<meta name="HandheldFriendly" content="true" />
The initial page loads to the correct size, but the users can now zoom in closer and the viewport isn't working. I was wondering if there is a way to disable to pinch to zoom using jQuery? Since I am already using some on my page it would be easy to implement.
Please note: Even on other websites like davidwalsh.name/demo/mobile-viewport.php that used to work it can now zoom in. I imagine this is part of the change with html5 released in December that disallows the maximum-scale attribute in meta tags but I cannot be sure. I have been using noBounce.js on page up until now that disabled all the iOS bounce and zoom capabilities but I am not sure which part is controling the zoom to steal that bit out of it and I don't use noBounce anymore on most apps for other reasons.
As of iOS 10, the mobile Safari browser will ignore user-scalable=no and will allow pinch and zoom on every website to improve accessibility.
From the iOS 10 changelog:
To improve the accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.
It looks like we will have to start designing sites with pinch and zoom in mind, at least for Apple devices.
I came up on the iOS10 Pinch-to-Zoom problem, i could fix this issue with a manipulation inside of the head-tag to the PortableWebApp(Cordova).
What i did was just to add this line in my init() from app.js
$('head').append('<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width;" />');
The App is now Scrollable, adapts to different screen sizes/devices and no more Pinch-to-Zoom.
Note: remember this only works for Hybrid Apps, Safari is not affected by this workaround.
I am using Foundation for a responsive website and have a problem with SOME mobile devices not properly scaling the viewport ONLY when you load another page via our ng-include. This loads new content into the page and the width of the page then breaks and requires horizontal scrolling.
This doesn't happen in certain devices such as Galaxy Note 3/4, but does happen in devices with identical resolutions, such as iPhone 6 Plus. I do have a viewport attribute and scaling set:
<meta name="viewport" content="width=device-width, initial-scale=1, target-densityDpi=device-dpi;">
Any help figuring out why this doesn't scale properly when I load new dynamic content for this single page application is greatly appreciated. I'm not sure if it's related (just thought of it), but we also use document equalizer reflow often:
$(document).foundation('equalizer','reflow');
I needed to add a min and max scale. Although I didn't test it, I imagine I just needed to add a max scale, as the content was flowing off the screen.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
When viewing my site on mobile device, the site is automatically viewed in mobile version, like the image i have attached below
But i need to view it in desktop view like the image below.
In other words, how to disable mobile view when the site is viewed in mobile device and use the desktop view instead?
It's hard to tell with the information given, but perhaps you're using the meta viewport tag:
<meta name="viewport" content="width=device-width">
If you have something like that in your code, remove it. If your website isn't designed to be responsive, then adding in the meta viewport tag will awkwardly zoom users in.
If you don't want your side responsive, you can manually set a width for the viewport. Add a meta tag like this into your html:
<meta name="viewport" content="width=1024">
where 1024 should be a width that your site looks good. With this number, you can fine tune the appearance of your site.
Also remember to remove any other viewport definitions(especially any width=device-width).
You may have a look at this article: http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design .
If your desire is just to view it in desktop mode / full site for testing (that's what it sounds like to me) and not permanently disable mobile view, than a number of browsers support Desktop view: Android Chrome -> tap on the top right three dots, select 'Request desktop site'.
If you are using this metadata ,just remove it and the site won't be responsive
<meta name="viewport" content="width=device-width">
otherwise you can add metadata for setting your viewport size :
<meta name="viewport" content="width=your-size-in-number">
You may want to read Responsive Web Design - The Viewport
I assume this has to do with the retina display and thus everything is twice as small as it should be on the iPhone.
This is the site I'm working on: http://share-the-secret.com/
If you resize the site horizontally to two grid block, that's how it is supposed to look on the iPhone. Currently on the iPhone you see the four grid layout.
I do not want to use media queries to give a custom size for all the elements on the iPhone.
Is there an easier fix for this?
Thanks!
Found the solution!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">