I found lots of threads about this topic but no one of them solved my problem.
I'm developing a website with width-based media queries, in order to give to the pages different styles depending on the device.
In the mobile version I need to use a lot of 'fixed' positioning but it brings a very big problem: in the Android Internet, in the iOs Safari and in many other mobile browsers i do not see the fixed positioned tags.
They are there (when I click in a place where a button should be, I see the shape of the button blinking) but they are invisible.
I used the viewport meta:
<meta name="viewport" content="width=100%, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, orientation=portrait" />
but it doesn't change anything...
I double checked all the z-index and I debugged all the code (looking for some syntax errors) but I'm not able to fix the problem.
Does anyone know what it could be and how to fix it?
Thanks!
Edit
If i scale my laptop browser to a "mobile" size and i watch the website in his mobile version, everything is OK.
Related
I am experiencing some issues with a website I am trying to build. I did some research (like always) among this and other websites (as usual) and like never, I was not able to find a solution that worked for me. Please have patience with me since I am a beginner (developing for practice and learn purposes).
So here's the deal. I started building a website but I got stuck in making it responsive. After the research I was talking about earlier I used the
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no">
It works as long as I am accesing the website throught the Chrome Browser for Android. It also works in Chrome for Windows when I select the mobile view or resize the window. The only browser that acts like skipping that meta line is the stock Samsung Browser (WebKit - it think, though not sure about the name).
Is there anyone that experiences the same thing? I was thinking is only my phone (Galaxy S2) but it seems that I am not the only one with this issue.
Thanks in advance and looking forword for a solution.
LATER EDIT
Worked around with the values. Seems like the <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10.0, user-scalable=yes, target-densitydpi=device-dpi"> is actually not ignored.
I played around with the max zoom values and it seems to work. The only issue now is that the stock android browser does not display the page acording to the #media screen and (max-width: 640px) present in the stylesheet file...
LATER (FINAL) EDIT
The css code was somehow faulty. Deleted the multiple screen resolution support and worked around only with the normal web view, then added support only for one resolution (#media screen and (max-width: 500px)) seemed to work (anyway, there are just a few devices out there that has width lower than 500). Now in regular view, the site successfully shows the content according to the CSS file. Shrinking the resolution will also display the page in a correct manner. I also noticed, that using "max-width" should be done in ascending order (first deal with high resolutions resolutions first).
I have successfully create my phonegap app and I find the same code results in perfectly readable sized fonts on iOS but difficult to read font size on an Android. I would have expected them to be similar.
Has anyone else faced similar issue? How to build once and make readable on both? Thanks!
I found a post that related to webviews that helped but I reference it here in case someone (like me) who is new to phonegap fails to make the connection.
font size different on ios and android
My viewport inside my html page was
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
I know little about viewport other than having read references that I should have it.
I took the first of #louielouie suggestions and removed reference to, rebuilt my app in the phonegap build service and the app results look similar on an ios ipod touch and a samsung galaxy tab 4.
I've read a few of the related StackOverflow questions:
here, here and here,
but I feel like I am still without an answer.
I have a great responsive design (very simple), that looks great however you re-size the browser on desktop. Now when I inspect the element via Chrome and use their phone preview, everything is so small and tiny. The background doesn't stretch like it does on desktop. The main content doesn't fill the area like it does in the desktop, even when the browser is re-sized to be the same resolution as a phone's.
Yes, I've included the viewport specifications.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Honestly, no matter how much I play with the width, it doesn't seem to change anything - in the desktop browser, or on mobile.
Why does a webpage look completely different in a phone's browser than it does in desktop with the browser shrunk to the exact same resolution?
Maybe the user-scalable=0 instead of no?
content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0"
So we're making our site mobile friendly but we're not even close to being done yet. Our desktop version works well but has big tables (that we are getting rid of -- slowly). In the meantime our mobile frame <section> cuts off our content. We would like it to show everything and just allow the user to zoom and pinch and scroll on their device like other non-mobile friendly sites. How do we do that? We have tried <meta name="viewport" id="view" content="width=device-width minimum-scale=1, maximum-scale=1" />
with no luck. Thank you!
This is what I use on almost all of my sites
<meta name="viewport" content="width=device-width initial-scale=1.0">
Edit: changed width
That's right, I want to enable zooming rather than disabling it.
I have created a responsive website and all is looking good. However for some reason you can't pinch-zoom in Chrome on a Nexus 7 (running Android 4.2.2).
This is my meta tag that makes sure it shows the site with the right CSS for the screen size:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Nowhere here do I say the user can't zoom. As I say, the site is responsive so there is no reason for the user to need to zoom, however if a user wants to zoom I don't want to stop them. There is no problem on the iPhone, the user can zoom if they want to. But on Android they can't. I have tried adding user-scalable=yes and user-scalable=1 but this makes no difference.
The only thing that works is removing that meta tag but then the site renders itself as if it's being displayed on a large screen so it is no longer responsive.
Is there anything I can do?
#David Lee's comment on top is correct: It seems more of a Nexus 7 thing than a Chrome problem. Google has had a lot of complaints regarding pinch-to-zoom wrt Nexus 7 and there is speculation that they are trying to work around Apple's pinch to zoom patent.
From what I know just using
<meta name="viewport" content="width=device-width, initial-scale=1">
should work.
I've looked at http://m.skyscanner.com/ as an example and it works on other devices with chrome and other browsers like Dolphin HD. And all that site has is the viewport code from above.
Chrome for Android has a way for us to force zoom - Open up the browser's main settings and tap "Accessibility," then check the option called Force enable zoom and see if this works in Nexus 7(I dont have that device so cant test it)
What version of Android? Android 2.2 doesn't support the viewport meta-tag, if your version is between 2.3.x and 4.x try this:
<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=yes" />
Hope this helps.
Although it is not a complete solution to your problem, but it can zoom a particular region.
Thierry B wrote a plugin that will do this and posted it on github repo
You can demo it here:
Just click on the part you want to zoom
Or for Viewport Zoom please refer to this tutorial
use this hope it will help:
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
The last parameter below: user-scalable = 1:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=1" />