link: http://www.kelvinhanssen.nl/projecten/marktmix_responsive/html/bedrijven_responsive.html
I made my first responsive webpage, and it doesn't act the way I want.
When I test it in this app: http://www.studiopress.com/responsive/
My website does what it's supposed to do.
But when you display it on your phone it look like it's been zoomed out
I can't attach any images because my reputation isn't high enough.
Any suggestions?
Add <meta name="viewport" content="width=device-width"> to your header.
This will make it so that the phone does not 'exaggerate' its actual width when rendering the page, which is how they typically get web pages to look decent.
I had this problem when I was doing my first website, it makes it look like its a desktop webpage, even though you have it set to look on a mobile webpage.
Just add this to your head part of your website, and it should work.
<meta name="viewport" content="width=device-width">
Let me know if it works.
Related
So I have a web application that is not really meant for mobile but in case someone wants to access the app with mobile I'd like to minify the website like this:
from this:
to this:
so the user can zoom in on mobile.
How could i do something like this?
add below tag inside your head tag:
<meta name="viewport" content="width=device-width, initial-scale=0.1,minimum-scale=0.1">
(you can adjust "0.1" value to get best performance)
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 am using dream weaver to create a responsive about me page for my site (using the default about me template). When I use the dream weaver on-device previewing system, the page is fully responsive and on my iPhone it resizes perfectly fine to look like this:
However, when I upload the code to the website, the page no longer becomes responsive. It simply looks the same as it does on my laptop (as shown below)
Why is this issue occurring?
The html page is this. If you need me to post the code here as well, please tell me. Your help is much appreciated :)
For media queries to work on small screens, you need to include the viewport meta element in the head of your document. E.g.:
<meta name="viewport" content="width=device-width, initial-scale=1">
I have created a css family tree by going through this tutorial. In desktop browsers it looks perfect. Here is how it looks.
Now I'm trying to make it display the same in iPhone and iPad screens. But when viewing it in those screens, it messes up the layout. Like so.
Note that some of the lines connecting the nodes are missing.
I have tried to resize the page using the html meta tags. Tried all the 3 lines below.
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="initial-scale=2.3, user-scalable=no">
But no avail. I simply need to shrink the page to fit the iPhone and iPad screens. Can anyone please tell me how I can accomplish this?
I have also created a fiddle here to demonstrate the problem.
Thanks.
You asked in the wrong category :) this is more css then anything else.
I bet you found an answer by now.
But for your fiddle:
.tree {
width:1100px;
}
Just let me know if you need anything more.
Have a nice day.
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">