At my new company I am maintaining a VB.Net webforms application. We are seeing an issue when viewing the site on an iPad that can be fixed by Requesting Desktop Site in either Chrome or Safari.
Is there a way to force this in code so the user does not have to hold the refresh button in Safari and request the desktop site?
UPDATE:
We are using Telerik controls and the functionality changes when its displayed on an iPad vs a browser on a desktop. When I pull up the page on an iPad the textbox filters will not work until I select Request Desktop Site, see below for wrong incorrect version.
Here is what it looks like after that is selected and normally on a desktop browser.
So I need a way to force the browser to request the desktop site/version when viewing on an iPad.
Without some examples its tricky to comment on this, but I think I know how to get the result you want. In the HTML of the page(s):
<meta name="viewport" content="width=device-width, initial-scale=1">
Source here.
This should fix the issue you're seeing in all browsers, if it is what I think it is.
Edit: Question has been significantly updated, this is definitely not the right answer.
Google keeps complaining that my website is not mobile friendly. Here's what they tell me a random page on my website looks like to Google Bot mobile:
And here's how that same page looks in Google Chrome Developer Tools Device-mode:
I've implemented a responsive design for my website, and although it's not 100% perfect yet (as you can see the content is slightly wider than the screen in the second image) it sure doesn't look like Google Bot mobile tells me. When I test it on a real mobile device it looks exactly like Google Chrome Developer Tools Device-mode.
Any ideas what could be wrong here?
Here are the important bits in the header:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
<meta name="mobile-web-app-capable" content="yes">
<link rel="stylesheet" media="all" href="/css/base.css" />
<link rel="stylesheet" media="(max-width:880px)" href="/css/dropdown.css" />
<link rel="stylesheet" media="(max-width:880px)" href="/css/mobile.css" />
mobile.css is an "add on" to base.css which replaces the stuff that needs to be changed, but base.css provides the "defaults" and is always loaded.
It's as if Google Bot mobile isn't triggering the loading of mobile.css.
I finally managed to solve it - it turns out that it was a min-width: auto; that Googlebot mobile didn't like.
For some reason (to solve an issue on tablets when I first started implementing my responsive design) I had put
body{
min-width: 1510px;
}
in my desktop CSS, and was overriding that with
body{
min-width: auto;
}
in my mobile CSS. After changing the mobile CSS to
body{
min-width: 100%;
}
Googlebot displays the page correctly. Will see if I can safely ditch the min-width on <body> altogether.
Please before you call this as duplicate and vote down read it!
I know this solution (twitter bootstrap for high resolution mobile displays) and I've used it but stil when I point to the site using Samsung S5 (high resolution mobile) it renders the tablet view instead of mobile.
Any other possible solutions beside using viewport initial-scale=1 or using the CSS mentioned in above question?
Amir
I found the issue!
It's very strange and interesting so I share for everyone who may have the same issue.
The solution with viewport works fine the issue really was how the mobile device was navigating to the site! I had a permanent redirect on my domain registrar (Godaddy) to redirect visitors to the actual deployment and that seemed to be the issue!
So here is the detail. My domain is aaaa.com and my code is deployed under bbbb.com/aaawebsitecontent
In aaaa.com domain registry I have a permanent redirect defined to redirect any request to aaaa.com to go to bbbb.com/aaawebsitecontent. If I point my mobiles browser to aaaa.com the viewport won't work! for some reason it still shows the high resolution desktop layout! If I point my mobile's browser to bbbb.com/aaaawebsitecontent then all works fine and system switches to the mobile layout!
I really can't explain why but regardless I know the issue's root cause!
I have been using Bootstrap basic template for each website I've created and I haven't met with problems yet. I own Samsung Galaxy S4 which has the same resolution as S5 so there shouldn't be difference. You should try it too. If you are having problem with some site you have created it would be fine if you could attach some code so we can review it.
As you can see here, there is the same <meta> tag (I hope there is no difference between scale=1 and scale=1.0) as in the question you have linked so yea, it is possibly duplicate question.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I am building a website with twitter bootstrap 03, can I add a link in mobile version only, that will allow the user to "Show web version" and when he is in web version the link will say "Back to mobile version". I this possible?
Pls look at my post here
Bootstrap 3 - desktop view on a mobile device
You have to set this here in a SESSION
<meta name="viewport" content="width=1024">
Instead of this (Responsive version)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In an attempt to hide the Safari UI components for an web-app bookmarked as a Homescreen Icon. I am using this meta tag
<meta name="apple-mobile-web-app-capable" content="yes" />
as specified on iPhone Dev Center but the address bar and toolbar are still there when launched from the home screen icon. What do I need to do different? Does anyone have an example?
window.top.scrollTo(0, 1);
Works on iPhone, but not in iPad. I have been successful hiding the browser components on iPad (so presumably everywhere) by using
<meta name="apple-mobile-web-app-capable" content="yes" />
and launching from a home-screen link. I am also using
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I have not tried seeing if the browser components are still hidden if I leave out the viewport properties.
Is it being launched from the home screen? The documentation on the linked page does not mention but I found this # Configuring Web Applications:
For example, you can specify an icon for your web application used to represent it when added to the Home screen, as described in “Specifying a Webpage Icon for Web Clip.” You can also minimize the Safari on iPhone user interface, as described in “Changing the Status Bar Appearance” and “Hiding Safari User Interface Components,” when your web application is launched from the Home screen. These are all optional settings that when added to your web content are ignored by other platforms
Have you tried adding...
<meta name="apple-touch-fullscreen" content="yes" />
From what I can tell, iOS only pays attention to the flags when you actually add the app. If the apple-mobile-web-app-capable thingy doesn't work at first, try deleting your app from the home screen then re-adding it.
I've run some experiments and found:
the location of the meta tag within the headers doesn't seem to matter (I thought it might!)
after adding the app and having it remove the address bar correctly, if you then remove the meta tags from the web page, iOS continues to remove the toolbar.
even after rebooting the device it still 'remembers' whether to remove the toolbar. The only way I've found of resetting this behaviour is to remove and re-add the app.
Hope that helps!
I know this is pretty old, but I came across this while searching for a solution. I was able to fix this by also adding:
window.top.scrollTo(0, 1);
to the body's onload method. Hope it helps anyone else coming across this.
There is a new directive, called "minimal-ui" that iOS browser takes into account (at least on the iPhone where I tested). Toolbars are hidden until the user clicks on the status bar on top. Very nice for one page apps!
Here is the snippet I use:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
http://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW2
It works on iOS 4.0.
Try this
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width; user-scalable=0;">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="icon.png">
Since iOS 7.1, you can use minimal-ui
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
That should indeed behave as expected, I have used it in the past without any difficulties.
<meta name="apple-mobile-web-app-capable" content="yes" />
This will work if:
The tag exists when the app is added to the home screen.
The app is launched from the home screen.
<meta name="apple-mobile-web-app-capable" content="yes" />
works on iOS6 + Mobile Safari Browser but ONLY if you added the page to your homescreen AFTER you included the meta tag on your site.
all above meta tags and window.scrollTo, did not work on ipad for me,
i found a button on safari next to bookmarks where you get an option called 'Add to Home Screen' it creates a new tile icon, and you can launch your web app like a native app, and no address bar there.