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">
Related
I'm working on a web page that has no mobile version. I want portable devices to show full, zoomed out version firstly. After reading few manuals I concluded that correct viewport meta tag should look like this:
<meta name="viewport" content="width=1200px">
Because I need a virtual viewport of width 1200px to show my webpage properly. However github(it has mobile version but it's possible to load desktop one on phones) and Youtrack has meta viewport tag like this:
<meta name="viewport" content="width=device-width">
Both options lead to the same result. How do you think, which solution fits web standards better?
https://i.stack.imgur.com/9pEp0.png
I don't know what's the name, but why i always get this style everytime i access http://forumesia.com
But the style is ok if i access it in desktop. Only in my mobile phone i got crop little part of the website, how to fix this?
I already using bootstrap css but it still croping like that, any suggestion?
This is usually because the device doesn't know to scale the website to the device width.
You should make sure that <meta name="viewport" content="width=device-width, initial-scale=1"> is added in the head section of your HTML
I have the problem that my website is resizing correctly when I change the viewport in chrome or go to it directly on my phone.
It does work however when i just resize my browser window.
This is the website http://maxehlers.com/test/ if you would like to try it out.
Most stuff on the website is set up with percentages for with and height.
How can i make the website act responsively when accessing it from a mobile device? Do I have to add media queries?
I think you are missing the viewpoint meta tag
here are the docs on MDN
something like <meta name="viewport" content="width=device-width, initial-scale=1"> should sort it.
There is more good info here on css tricks on resposive tags
I'm using Bootstrap for a website and I notice that when I view my layout on a mobile device, my mobile's web browser automatically zooms in to a particular top left corner portion of the webpage. I want the browser to show the whole webpage at start instead of zooming into the top left corner. Showing the whole webpage (albeit may be a little small in size) is the default behaviour when I don't use Bootstrap.
Is it possible to get Bootstrap to show the whole webpage instead of zooming in to the page when first entering it on a mobile device?
This most likely has to do with the viewport being set. Assuming your webpage is a standard size, you can use:
<meta name="viewport" content="width=1024">
make sure to place that in the head of your page - or replace the one that is currently there.
I believe you're looking for the Viewport html tag: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
You can disable it by removing the viewport meta code from your . This worked in my application. If you want to have it correct for your device, put this in into head tags.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
http://getbootstrap.com/css/#overview-mobile
http://getbootstrap.com/getting-started/#disable-responsive
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.