This is my Client website Click here, it is responsive on all screen which work good on desktop all browsers, Ipad all browsers but i am facing issue on android mobile browser like Chrome and Firefox.
I have one other browser on mobile which is provided by Asus default browser, website working responsive perfect on that..
I tested on multiple Android devices facing responsive issue.
Yes there is viewport meta tag already there
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=0.666667, maximum-scale=0.666667, user-scalable=0">
<meta name="viewport" content="width=device-width">
Any help will be appreciate..
Related
My front-end works with bootrstrap3.
Firstable I had responsive issues on mobile device that I fixed by adding the meta below:
<meta name="viewport" content="width=device-width, initial-scale=1">
That works well but I have still a strange issue. Most of times, by landing on a page on mobile device, the zoom is lower than 100%.
Actually, what I note is that when the issue is happening, the whole page is displayed on the viewport, so that the zoom is adapted to the total height and width of the page.
If anyone has a solution to fix this issue that would be great.
Try adding the following to your head-tag:
<meta name="viewport" content="width=device-width, user-scalable=no" />
For Mobile Safari in iOS 4.2.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
We are disabling zoom on a mobile web based application. You can't zoom in Native iOS apps and it's not required in our web application. If your site or app is mobile optimised then your users won't need to zoom. There are always use cases for disabling zoom. It doesn't have to always be one way or the other.
I am on a project that, when opened from a mobile device (in my case Android Browser 4.3), does not apply media queries.
To simplify the problem and show it on here, I have created a super simple ONLINE DEMO with just this code:
<!doctype html>
<html lang="es">
<head>
<title>EM TESTER</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes">
<style>
body{background-color: yellow;}
#media screen and (max-width: 25em) {
body{background-color:red;}
</style>
</head>
<body>
<div style="font-size:300%;">25 EM TESTER</div>
</body>
</html>
When I open this from my mobile, it should have red background as it is less than 25 em width, but it does not apply this.
This works properly on Chrome on my Android, but not from my Android browser 4.3. I have tested this on almost 10 devices, and all work properly (having background color red), even on other Android Browser versions.
Is there any known bug about this?
If I set media queries with PX instead of EM, it applies correctly.
Different browsers/devices have different issues, and mobile browsers are especially buggy. Is it just your phone or all android devices? It is probably just an issue related specifically to that browser or device. Test on other mobile browsers and see what browsers have the issue. Narrow it down and then you can start looking at a more specific problem. Also, double check your mobile browser screen width, that can be confusing sometimes.
My site is http://www.hificorder.com, and if you drag the browswer smaller in the desktop, you will see that it is responsive.
But if you load the browser in Safari on iPhone or on Chrome in Android, it renders eye-bleed small as if desktop client.
Why??
By Looking at your code I found that You have to set the meta view port value
Because you have to tell the browser to display the website content how it should fit into the screen
try this code
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
Link : http://www.html5rocks.com/en/mobile/mobifying/#toc-meta
I am using Jquery Mobile UI and am finding that Samsung Galaxy S4s are not detected as being mobile devices. Is there a way to force them to be seen as mobile devices?
Use this meta tag inside your <head> section, this will solve your problem =)
<meta name="viewport" content="width=device-width, initial-scale=1">
I have browsed through many topics here and on the web, trying to solve my issue. I'm very close to finding a solution but there is one thing that is still not working correctly.
I have a mobile website that is 640px wide. It should:
Show zoomed in on all browsers correctly, also when changing the orientation of your device
User should not be able to zoom in (input fields neither).
I have used this viewport meta tag to accomplish this:
< meta name="viewport" content="width=640,maximum-scale=0.5,initial-scale=0.5, minimum-scale=0.5" />
This works great on Android, both portrait and landscape. It works great on iOs on portrait too, but it shows the site zoomed out on landscape, so it's not adapting to the width of the phone, but keeps the original portrait size. I have tested this on iPhone 5 and iPhone 4S.
I have found mostly issues with responsive websites and not so many with fixed mobile websites. Is there a solution for my problem by changing the viewport meta tag? Or should I be looking into javascript to solve this?
Thanks in advance.
Edit:If anyone is interested, I used this bit of code in Coldfusion which is working perfectly fine now (iOs & Android):
<cfif findNoCase('iPhone', cgi.http_user_agent,1)><meta name="viewport" content="width=640" /><cfelse><meta name="viewport" content="width=640,maximum-scale=0.5,initial-scale=0.5, minimum-scale=0.5" /></cfif>
I tend to use those lines in my head to optimize responsive sites:
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
Maybe adding those will fix your problem?
I know from experience, that iOS Safari behaves strange in some cases. Here is a line that I use to fix some other issues I had with it before:
<!-- This script prevents links from opening in Mobile Safari. https://gist.github.com/1042026 -->
<!--
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
-->
Alternatively you can try running your site as iOS Web-app:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="">
Hope that some of that will fix your problem:)