I'm setting up a website www.bytework.dk.
I've added the viewport meta tag, which usually always works fine for me, so the site looks right on smartphones. But for some reason, this site ignores it completely and the site is zoomed out to full size on mobile.
I've checked all the javascript code, I've checked the CSS. I have no idea why the hell it has no function?
Whatever settings I try with the viewport meta tag it has absolutely no effect on the appearance of the page on a smartphone???
This is the code I'm using:
<meta name="viewport" content="width=device-width, initial-scale=1">
EDIT: Seems the problem is related to some dns settings on the domain provider I'm using and the shitty solution they made.
try to open it in an incognito window (if you're using Google Chrome) and see if that's still happening or clean up your cache, restart your browser and try again.
Im creating an Angular2 Chrome-extension App.
It looks great when I created it in production.
However, this is how it looks when I upload it as a chrome-extension in development mode (Look at the logo and buttons).
The logo SHOULD be 75px (which it is in development), however in production it decides to be 87px even if the chrome tools tell me its 75px...
The same happens with the buttons.
Am I doing something wrong?
I did add the
<meta name="viewport" content="width=device-width, initial-scale=1.0">
tag.
It seems like chrome is taking over control of the viewport?
Check out your 'zoom' setting in Chrome. (CTRL+MOUSESCROLL)
Check out zoom settings on chrome and also make sure your font size is displayed in px and not em's since somehow chrome extensions do not replicate em size as they are in development.
I built a one-page site which works fine, except for one thing (on mobile devices), which is the overflow-x:hidden.
I use <meta name="viewport" content="width=device-width, height=device-height"/>.
and when I searched I find this issue
so I create site wrapper div inside the body and applying the overflow-x:hidden to the wrapper. but still have problem in mobile and tablet device.
my website is here.
Works fine for me too on Samsung galaxy s5. Might sound silly but it isn't just cached on your devices is it since before you added the wrapper and overflow-x: hidden? I had to clear my phone cache a lot when I was updating my site recently.
I don't believe there is any solution to hide bars programmatically using javascript/css/html, but let me try to describe a problem. We are the team of mobile game developers and we have been developing a game for one year.
After iOS 7 announcement we have faced the problem that it is IMPOSSIBLE to hide the navigation bars. Once user taps in the upper or lower part of the Safari browser, navigation bars are appearing again and hide all controls of the game.
The only solution we have found so far is forcing user to:
Rotate device
Scroll the page
Add application to Home-screen
None of these alternatives is acceptable. It looks like Apple is aware of this problem, but keeps ignoring it. They have closed a reported bug as a duplicate of the bug #14076889.
I believe that we are not the only team who experience the same problem. Does anyone know the solution?
Update September 2014: iOS 8 has removed the minimal-ui feature
There's again no way to remove/hide navigation bars other than to rely on the default browser behavior (bars will be hidden when scrolling, but only if the scrolling element is the BODY of the page). The only "workaround" is to save the app to the homescreen and have the proper meta tags set (see below).
Update August 2014: iOS 8 (beta) no longer supports minimal-ui.
There's no workaround. (The reason for this is likely due to abuse by websites that used it to try to prevent people from navigating away, tho there may be new features in iOS 8 Safari that have not been made public yet that replace minimal-ui.)
iOS 7.1 added a new API to solve this problem:
<meta name="viewport" content="minimal-ui">
This new viewport flag hides the Safari UI by default (only a small title bar with URL and SSL indicator are shown). To access the Safari UI, users must actively tap this title bar.
Note that on iOS 7.0.x, there's no API or known workaround for this. In those versions, if you want to hide Safari's browser chrome permanently you need to either get the user to add the web app to the home screen (with the appropriate meta tags set <meta name="apple-mobile-web-app-capable" content="yes">) or use some sort of native app wrapper like Phonegap and distribute via the App Store.
Personally, I wish they hadn't removed the "full screen" button they introduced in landscape mode on iOS 6 Mobile Safari, which was a great solution that made developers and users happy.
A perfect candidate for this to be solved more permanently would be for Mobile Safari to support the HTML5 full screen API (which is supported on Safari on OS X!). Alas, there's no support right now and historically iOS point releases didn't add new Safari features, so maybe that's something for iOS 8.
UPDATE: There is a meta property for fixing this currently in iOS7.1 Beta according to this forum post on the release notes.
<meta name="viewport" content="minimal-ui">
I have run a test and can confirm this feature is currently in Beta 2.
NOTE: The new minimal-ui option is a great solution but it needs to be part of the HTML response.
I tried on iOS7.1 beta3 to append the viewport meta tag with JS
$('head').append('<meta name="viewport" content="width=device-width, user-scalable=0, minimal-ui">');
the value "minimal-ui" is ignored by the browser.
Update: iOS7.1 has now been released so the NDA has lifted.
<meta name="viewport" content="minimal-ui">
Is indeed the correct tag and works in the live release. Remember that "viewport" can support a comma separated list if you require.
I combine it with other mobile variables to make the website feel like an app:
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui">
-
We have been struggling with this one too. We have a TabBar on our site and every time you attempt to click a tab safari controls pop up.
Today hope. If you are a member of the apple developer program, I would strongly suggest visiting this forum: https://devforums.apple.com/message/927476
W
EDIT 2:
Does not work since iOS 7.1
EDIT:
Some games have adopted an overlay that hints the player to scroll away the bars and then locks scrolling until bars pop out again. In this case position: fixed helps a lot, as it stabilizes the movement (can't explain it better, just have to try it for yourself). This game is a good example of such approach:www.paf.com/mobile/launch/flowers.html (sorry, can't post more than 2 links)
Recently I have also stumbled upon a hack that deactivates navigation bar triggering for the top area. All you have to do is add a random element to your DOM with following styles:
z-index: 100000; /* should be bigger than everything else */
position: fixed;
overflow: scroll;
-webkit-overflow-scrolling: touch;
Read more about it here.
If you are creating a web-app, you can create a link to the URL from the home screen; and use the following HTML Meta Tags:
<!-- Allows fullscreen mode from the Homescreen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Sets the color of the text/battery, wireless icons etc -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
This will super-impose the indicators over your header/nav bar. (The indicators you see on all the iPad screens.
For more info, see:
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Hopefully this helps someone, but I didn't want to set my viewport width=device-width.. because its 480px on iphone 4.. and I want my game to be at 800px for all devices.
And if you don't set it, then minimal-ui doesn't register.
My work around is doing:
<meta name="viewport" content="width=device-width, minimal-ui">
And then changing the viewport once the page is loaded:
$(window).load(function(){
$('meta[name=viewport]').attr('content','width=800, maximum-scale=1')
});
I'm pretty shocked it works. The address bar and lower UI buttons only appear if the user clicks the top/bottom of the screen. Love it now.
This solution worked for me, but in my case, the webapp was for
a private public, where I had control of the Ipad that would be used.
I tried to use all possible meta tags and hacks, and really, after
IOS8 have removed the minimal-ui feature, was practically impossible to solve.
Thinking outside the box, our team reached a nice solution:
The Mercury browser opens in fullscreen, and even when pages
are being charged, the address bar does not appear.
It is a small icon on the bottom right and only :)
It worked perfectly for our problem!
But I repeat: do not use it if you are developing a webapp for the public in general.
It's terrible for the UX force your user to download a different browser
to access the app.
UPDATE
A developer friend of mine came up with this solution:
Use a webview inside of Titanium from appcelerator.
It won't be aproved on Apple store, but for a private event, it'll work just fine!
Should I scan for tags in the html code? Or what? What determines whether a page is optimized for mobile?
One option is to scan for tags. If so, what other tags are there?
<link rel="apple-touch-icon" href="..." />
<meta name="viewport" content="width=device-width, user-scalable=no" />
Another option is to see if the HTML returned from a mobile user-agent is smaller than the HTML returned from a desktop browser. user agent...
Any thoughts?
One option: look for: <meta name="MobileOptimized" />
Another: <meta name="HandheldFriendly" content="true"/>
Another: doctype is either XHTML-MP or WML (or other mobile-friendlies).
Here's a usefuil link for sniffing out different smartphones using JavaScript.
http://www.hand-interactive.com/resources/detect-mobile-javascript.htm
However, its worth paying attention to the caveats in the above link. Particularly, the fact that we are browser sniffing, which is inherently unreliable (I recently got a hit on my website for MSIE 999.1)
What exactly are you trying to accomplish?
Officially, there is no such thing as a mobile page. It's perfectly possible to create a page that works equally well on mobile as on desktop browsers. Hell, if you just make a page with simple html and no styling it will already do that.
These days we often see seperate mobile pages, but usually this is an indicator that the design of the 'normal' page was not thought-through.
Long story short, you could never detect this 100% because there's no real difference.
If you want to find out whether or not a browser is mobile or not, check this out: http://wapl.info/coding-for-the-mobile-web-with-WAPL/chapter/isMobileDevice-via-CURL/
Pass through all of your headers, and the web service will do the rest.
Better than detecting mobile with javascript, or looking for specific tags - do it before you even start outputting anything to the screen.