I'm making an app on PhoneGap using Jquery Mobile. The app runs fine on the PC browser and on the simulator, but when I install it on my phone everything is very small.
On my home page I have a listView that is searchable, and when I tap the textfield to search something the page adjusts to a more readable size.
How can I solve this? I want it to be readable from the start.
Add this in the <head> of your html:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
It will scale the page to fit your device size.
Related
I want my website to be responsive on all platforms (especially mobile), not just on a desktop when resizing the browser window.
I have used the meta viewport tags in my <head> that other similar threads say I should do, but nothing has worked.
What's not working with the viewport tag #Rohan? I noticed that it was missing from your template
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I recently built a "responsive" webpage with bootstrap. The weird thing is when I check the different resolutions on my computer I can see that the page is truly responsive. When I checked it on my phone the text was small, the navigation menu didn't change to its responsive mode. When i minimize the browser window to the resolution of a phone it works perfectly.
(By the way i checked it on my Gallaxy S3 and WP8, I'm pretty sure the problem is in all mobile devices). I came a cross something called viewport, but its quite hard to understand how to use it.
Can someone help with this problem? How can i fix it?
Thank you all in advance!
Add this to your html:
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
I'm currently working on a mobile version for a website iv'e built ,
It's abit of problem to create a different subdomain and folder and build a total new mobile version since it hasn't requested.
How can I make the website be exactly the same but fit 100% in the Mobile screen?
Once I enter the website via mobile , I just see the logo because it's big enough to fit 90% of the screen.
The thing is , I can't create a specific mobile version , I just want the web to look exactly like on PC just extremely small.
Put a viewport meta tag in the <head> of your html document
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I am using this viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
However, the iPhone/iPad/Android devices the page comes out much larger than the screen. I can only see the top left corner of the site. My web site is 900px wide.
Next I changed viewport to this:
<meta name="viewport" content="width=device-width">
Now on the iPhone and maybe iPad it comes out okay with the content zoomed out so that it is filling the screen. I'm not sure about the iPad since I don't have one of those to test with. On Android devices this change did nothing.
What is the correct way to set view port so that a site fills the browser width?
Try adding target-densitydpi=device-dpi to your second example. This is Android specific and works with width=device-width to tell the device that you want the page to be scaled to fit at all device resolutions.
having finished a little webpage and giving it a basic layout, I decided to test what it'd look like using a mobile browser. So I installed the Android SDK with emulator, and as it turns out, the couple of elements on the page appear really small. I'd estimate about 80% of the page is currently empty background by default. However, when I zoom, it looks great, because the width:height ratio matches the phone's screen. That said, I'd prefer to leave the page unchanged, it just needs to be bigger as a whole.
Is there a way I can make my page appear zoomed-in on by default?
Try this:
<meta name="viewport" content="width=device-width">
for an initial scale of 1:1, add this:
<meta name="viewport" content="initial-scale=1.0">