The challenge in implementing a responsive theme is to only insert the VIEWPORT tag for devices you wish to target. In my case, I want to add the tag for mobile-class devices, but not tablets.
I am trying to accomplish this with a conditional HEAD in the top of my theme template.php:
if (getIsMobile()) {drupal_set_html_head('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">');}
function getIsMobile()
{
$RE_MOBILE = '/(nokia|iphone|android|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220)/i';
$_isMobile = (isset($_SERVER['HTTP_X_WAP_PROFILE']) || isset($_SERVER['HTTP_PROFILE']) || preg_match($RE_MOBILE, $_SERVER['HTTP_USER_AGENT']));
return $_isMobile;
}
The string of user agents above intentionally omits iPad.
At first blush, this works OK, but it appears to "time out" in production mode. After some authencated activity like node editing, the VIEWPORT tag ceases to be included when viewing the site on an applicable mobile device. I haven't yet been able to determine the exact conditions under which this occurs, but I suspect this has to do with page caching (which is turned on to "normal"). Flushing all caches fixes the behaviour temporarily.
Can anyone suggest what may be faulty with this approach, or alternate approaches?
Your suspicions are correct. This has to do with page caching.
With Drupal's page cache set to "normal", each page is built upon the first view by an anonymous user and cached in the {cache_page} table. Subsequent anonymous users viewing the same page are served the page from the cache table until the cache expires.
As a result, if the first anonymous user to visit the Page-X has a user agent on your list, the page will be built and cached with the viewport tag. Subsequent anonymous visitors will be served the page with the viewport tag regardless of their user agent until the cache expires and is rebuilt. Then the process starts over.
The simple answer is to disable the page cache. But I don't recommend that even for very light traffic sites.
A better solution is to move this logic client-side; that is javascript. Assuming jQuery is already loaded, you can use this to append the meta viewport tag for your list of devices:
<head>
<script>
if (navigator.userAgent.match(/(nokia|iphone|android|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220)/i)) {
$('head').append( '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">' );
}
</script>
</head>
The above would go in your theme's page.tpl.php file.
Related
I am developing a webapp using angularjs. The webapp loads perfectly fine when the mobile device language is set to any except Chinese. I debugged a lot and found the issue that the web app is not loading because of the meta view port tag in the index.html. As soon as I remove the width and initial scale from meta viewport tag, the web app loads successfully in the mobile when the language is set to Chinese. navigator.language = "zh-CN" May I know the reason why this is creating problem when navigator.language is set to Chinese ? Is there any other alternate solution to make my webapp working?
Having the below meta tag in the index.html, doesn't render my app properly if language is set to Chinese
But if I remove the width and initial-scale, then the app renders properly if language is Chinese.
<meta name="viewport" content="maximum-scale=1.0, user-scalable=no, minimal-ui"/>.
I also tired a sample app, but the issue is observed there as well. Please see below my index.html where you can easily reproduce the issue in any Android phone. I tried in my S3 and also in a S4 device . Please help me on this issue. You can copy the below index.html and load it in your apache server to see the issue. The moment you remove the width and initial-scale from the DOM element, you can see the app loads perfectly.
Please help on this issue
Instead of setting initial-scale and/or user-scalable, try combining a minimum and maximum scale. For example:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
You don't need to use minimal-ui. Apple dropped support for this in iOS8.
It's never a good idea to set maximum-scale nor to set user-scalable="no" because it stops people from being able to zoom, which they may need to do.
It would be interesting to see what happens when you remove these and simply use the viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I cannot see how the language would be causing this to happen, but it clearly is occurring, it sounds like a very interesting edge case.
Have you also tried other Chinese related lang settings such as "zh" or "zh-Hans"?
I also wonder if it's related to the font, and thus related to this question?
Ive got a problem with website which I was helping to develop.
link is here: http://orfinstudio.pl/www/
why the website is not scalling to the size of mobile?
Ive used
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
tried also other combinations..
I'm fairly new to this place but I've some experience with web design and stuffs.
I advice you to never use templates because they can be very difficult to handle.
If you are using css positioning I greatly advice you use margins to move your containers around. left, top, right, and bottom will retain their property whether it's on mobile or desktop. So
top:1000px(desktop) = top:1000px (mobile), but
margin-top:1000px(desktop) = margin-top:1000px/mobile screen size(mobile).
Use px (NOT percentages)as unit when you are directly in the body tag, mobile phones are smart, they will shrink the web page in a facinating way so you dont have to worry about multiple css for the same website(mobile queries). I advice you only use percentages in child containers, e.g a div in a div.
Make sure you understand how a slider works before you implement it into your website.
Finally the website looks as though its missing some style sheets,make sure you have the right paths/reference to each style or script files.
This is a mobile-desktop website which I created sometimes ago using pixels http://marybethandtonias.com
I had this problem once,i got solution through internet and i fixed it,Change this in your meta tag...
content="user-scalable = yes"
I'm trying to find a way to set the size of the body element of a website to the size of the available screen. On a desktop browser, it's easy: width=height=100% but on a mobile device it's not so simple:
Many device default to some initial zoom-setting that tries to display pages at an optimally readable scale. For Android, I can turn this off with the following <head>-tag:
<meta name="viewport" content="width=device-width, height=device-height, target-densitydpi=high-dpi, initial-scale=1.0>
Now, setting the width of the body works as expected (under Android). The height is a whole different problem, since the browser will then set what 100% means based on the current location of the address bar. So, if your page was initially longer than visible and had been scrolled such that the address bar is off-screen, setting height to 100% has the desired effect. But as soon as the user moves the page down to expose the address bar, the height gets updated so that it is no longer possible to scroll back in the other direction.
So, for mobile devices, it seems that the only way to set the body height correctly is by setting it to a pixel size rather than 100%. But reading this article on all the different available size measures (screen.height, window.outerheight, ...) gives me the shivers about making it work across devices:
Thus my question:
Is there a reliable, best-practice way to achieve setting the size of the body element on mobile devices such that the page takes up all available screen real-estate (including pushing the address bar off-screen), but no more? For extra credit: Can this be done, such that the user can still zoom in (but not out) on the page?
Solutions either using JavaScript or CSS or both are perfectly acceptable for me, but they should work across as many devices as possible, at the least on the desktop (IE6+, Opera, Chrome, Firefox, Safari) and on mobile devices (phones, tablets, Android, iOS, Windows Mobile).
I'm not completely clear where you are heading with this, but see if any of these suggestions help.
For the meta tag, try
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
I'm not sure if target-densitydpi=high-dpi is required. Easy enough to replace if necessary though.
For the CSS
html,
body {
height: 100%;
}
And to hide the address bar, I've used this code with good results before, or here's another that I haven't used
Good luck!
I'm working on a responsive design site and ran into a fairly large snag. I used viewport code:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
and used:
#media only screen and (min-width: 501px) and (max-width: 930px) {
CSS HERE}
as needed. When I put my index page on my host server to check it the site wouldn't respond to changes between my mobile devices. I tried my domain name site- didn't work. Turns out the domain name points to my sever and displays the site in a <frameset> and canceling out my CSS and meta. When I go to the native web address of the server it works properly. Is there anyway around this?
SOLVED - I have found a solution using a well know hacking technique to inject the relevant code (without actually hacking anything!).
I have my domain name at 123-reg.co.uk and free webspace at freehostingEU, with framed web forwarding on 123-reg.co.uk to maintain my domain name in the free space. To solve the problem of the frame blocking the viewport meta tag on the site, go into the web forwarding options in somewhere like 123-reg.co.uk where you can usually set your meta title, meta desc, meta author etc, and inject the following code into one of the boxes where you are allowed to enter some meta data for your framed page e.g. meta author and insert:-
your-author-name"><meta name="viewport" content="width=device-width, initial-scale=1.0,
which will then put the viewport code into the frame forwarding page straight after the meta author. And it works, because I have just done it on 123-reg and it works great!
This site finally explained how I could do this to me. Now when you visit mydomain.com it forwards to www.mydomain.com which in turn links to my azure server. The domain remains in the url without frames/masking i.e it shows the url I bought want, not the azure one.
http://blog.smarx.com/posts/custom-domain-names-in-windows-azure
From the link:
Add the CNAME record
Step one is to create a CNAME record mapping the “www” subdomain (as in www.botomatic.com) to my Windows Azure application (botomatic.cloudapp.net)
Forward the root domain
Step two is to use domain forwarding to map the root domain (botomatic.com) to the subdomain we already mapped (www.botomatic.com).
I set up a responsive design site which uses the client's viewport to determine how the site is configured. It turned out my domain name was forwarding with masking and the CSS was 'reading' the frame as the viewport. disaster averted.
I'm trying to add a Google +1 button to my website.
I have followed the instructions here:
http://www.google.com/intl/en/webmasters/+1/button/index.html
This the code for my webpage:
<html>
<head>
<title>
Why won't it appear?
</title>
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</head>
<body>
<h1>
Example title
</h1>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall" href="http://www.example.com/"></g:plusone>
</body>
</html>
As you can see, I've followed their instructions exactly, and yet it does not appear. I've tried it on Chrome, Firefox and IE8 (all on Windows XP). I'm just opening the webpage from my local system.
Interestingly I can see it working here http://www.satinbow.co.uk/xxtest.html
Can anyone solve the mystery?
Update / clues
When the page is stored on my system locally, it doesn't work (hard refreshing didn't fix it either.)
But I've put the page here: dl.dropbox.com/u/6920023/test2.html and it seems to work there.
It would be really cool know what's going on :)
I think it's because when it's local (not webserver) browser block the JS script (that's hosted externally) to prevent security breach. That's why it doesn't work
Link: http://ejohn.org/blog/tightened-local-file-security/
Another thing to check for is whether you have any ad blockers active. These can disable the +1 button and move the iframe containing the button out of the screen.
Working on my open source project, http://code.google.com/p/gwt-socialmedia,
i have discovered another reason that can cause the +1 button not to render: You forgot to define the "URL to +1": It must be a valid URL to an accessible website (so http://localhost won't work for i.e.).
Indeed, the PlusOne API seems to connect to the site URL, in order to get some metadata about it (like the description, title, etc)
If you don't define the URL, Google will send you an error HTTP 400 (Bad Request), with the internal message : "The requested URL was not found on this server. "
and the button will not appear...
Hope it helps!
Due to browser security(as mentioned in one of the answer) it would not display the button. Still to display google plus buttons when your file is local use local web server(WAMP/XAMPP) or you may use PHP local server https://www.sitepoint.com/taking-advantage-of-phps-built-in-server/ to host your file on your computer and you will see the button displayed in your file.