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
Related
I'm developing a simple webapp with Xamarin/MAUI.
If I build it on iOS it works fine, but on Android (both emulator and two different devices) the page content is displayed as if the screen was 400px.
If I remove <meta name="viewport" content="width=device-width, maximum-scale=0.5, initial-scale=0.5, user-scalable=no"> from the header of my website it's technically correct, but not as I intended.
Is there a way to maintain the header and display the page correctly on Android?
Thanks!
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..
I have a basic HTML Table. It renders as expected on a PC. But on a mobile browser (tested on firefox and chrome on Android) some rows are large and some are small like this. I have uploaded my code here (QR Code).
Why is this happening? and how to fix this?
Got solution from a different question. Adding a viewport tag in the <head> section, will prevent device scaling/zooming and give a uniform look across mobile devices
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
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:)
I have a problem in mobile browsers with the use of media queries in compination with background images
<meta name="viewport" content="width=device-width" />
The meta tag above is needed for the mobile browsers to react to the media queries (otherwise the browsers pretends it has a larger screen and downscales the page), the problem is that this meta tag when used also scales up all the background images on the site. This totally breaks the design of the page.
I want all of the browsers to represent every element of the page in the scale 1:1.
How can I make the media queries work but prevent the browser from upscaling background images in the page. In short I want the page to be treated the same as in a desktop browser.
The same problems occurs in both Android and iPhone browsers.
Have you tried using fixed background-size property, eg. background-size:100px 100px;
Yes, you have to use scaling in your meta tag:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />