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?
Related
I recently launched a site I was working on and with a responsive theme, but it displays the desktop version on cellular devices. It works properly on my staging site, but after migration, the live site does not display properly.
Live Site: http://www.sterlinganalytics.com
Stage Site: http://stage.sterlinganalytics.com
I have already cleared the cache and got the same result.
Unless I missed it, I believe you are missing the responsive meta tag on the live site:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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 make a website responsive and looking good on smartphones and tablets.
Here's a link to this website: http://fineart.d.dev.vendo.no/
The problem is that my mobile devices don't see a media queries I wrote specifically for them.
I know that this question is really often asked here on Stackoverflow but I didn't found any solution for this problem. Here's my code:
#media only screen and (max-width: 768px) {
/* Some mobile-specific code goes here */
}
I tried to use max-device-width and added
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
to the section but without success :(
Could you please help me to solve this issue? I realy stuck with it and need your help.
Thank you in advance!
I'm not seeing the viewport meta tag in the head of the page -- am I missing something?
I would recommend using this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Having "maximum-scale=1" will prevent users from scrolling, which is commonly seen as an accessibility problem. Let a user zoom if they need to.
As for the media queries, I looked at your CSS, but I didn't actually see any media queries present. Are you sure that the CSS file with those queries loading?
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.
I´m using a different stylesheet for smartphones and smaller screensizes using <link rel="stylesheet" type="text/css" media="only screen and (max-width: 700px)" href="/smartphones.css" />
The thing is that in my browser it works ok (when I make the window smaller, or when I use a site that emulates some smaller devices), but it won´t work when I try to access my site using my phone.
I´ve tried with an HTC Wildfire (240x320 px) and I´ve set my smartphones.css stylesheet to get called if the screen is smaller than 700px.
I´ve deleted the cache, and I´ve even tried with a couple of other phones... it still appears the complete, normal, big sized window version of my site.
Any thoughts on what could be wrong?
The site is liganet.net
Thanks!!
It might be that your smartphone is not telling your website that it's screensize is small. It happens with smartphones sometimes. My HTC Wildfire scrolls the window and keeps it big, instead of telling the website that it should be handed a smaller version.
Maybe you should check for HTTP headers for User-Agent instead of relying on screen size for this.
hey just add this in tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and it will work.