Webpage starts zoomed in on mobile devices
I'm using this code on my webpage
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
I would think the initial scale would make sure the webpage was zoomed out, but it doesn't. Any ideas?
I've tried this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
But, I need the width to be set to 1000px or it doesn't look correct.
Answer:
<meta name="viewport" content="width=1000; user-scalable=0;" />
html viewport
asked Jan 11 '13 at 5:44
EGHDKEGHDK
7,80938106178
add a comment |
I'm using this code on my webpage
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
I would think the initial scale would make sure the webpage was zoomed out, but it doesn't. Any ideas?
I've tried this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
But, I need the width to be set to 1000px or it doesn't look correct.
Answer:
<meta name="viewport" content="width=1000; user-scalable=0;" />
html viewport
asked Jan 11 '13 at 5:44
EGHDKEGHDK
7,80938106178
this solution will solve alignment issues too on smart phones! just wanted to post my findings. stackoverflow.com/questions/10402081/…
– user9008566
Jan 9 at 13:50
add a comment |
I'm using this code on my webpage
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
I would think the initial scale would make sure the webpage was zoomed out, but it doesn't. Any ideas?
I've tried this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
But, I need the width to be set to 1000px or it doesn't look correct.
Answer:
<meta name="viewport" content="width=1000; user-scalable=0;" />
html viewport
asked Jan 11 '13 at 5:44
EGHDKEGHDK
7,80938106178
I'm using this code on my webpage
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
I would think the initial scale would make sure the webpage was zoomed out, but it doesn't. Any ideas?
I've tried this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
But, I need the width to be set to 1000px or it doesn't look correct.
Answer:
<meta name="viewport" content="width=1000; user-scalable=0;" />
html viewport
html viewport
asked Jan 11 '13 at 5:44
EGHDKEGHDK
7,80938106178
asked Jan 11 '13 at 5:44
EGHDKEGHDK
7,80938106178
edited Jan 15 '13 at 18:28
EGHDK
asked Jan 11 '13 at 5:44
EGHDKEGHDK
7,80938106178
asked Jan 11 '13 at 5:44
EGHDKEGHDK
7,80938106178
asked Jan 11 '13 at 5:44
EGHDKEGHDK
7,80938106178
7,80938106178
this solution will solve alignment issues too on smart phones! just wanted to post my findings. stackoverflow.com/questions/10402081/…
– user9008566
Jan 9 at 13:50
add a comment |
this solution will solve alignment issues too on smart phones! just wanted to post my findings. stackoverflow.com/questions/10402081/…
– user9008566
Jan 9 at 13:50
this solution will solve alignment issues too on smart phones! just wanted to post my findings. stackoverflow.com/questions/10402081/…
– user9008566
Jan 9 at 13:50
this solution will solve alignment issues too on smart phones! just wanted to post my findings. stackoverflow.com/questions/10402081/…
– user9008566
Jan 9 at 13:50
add a comment |
6 Answers
6
active
oldest
votes
initial-scale=1.0 tells the browser to set the zoom level to normal (i.e. not zoomed in or out). You only need width=1000:
<meta name="viewport" content="width=1000">
answered Jan 14 '13 at 11:21
Jeffery ToJeffery To
10.9k11939
2
Awesome. So simple, and thanks for the explanation. I updated my question to show my current code. I added in a user scalable option, so my users don't have the option to zoom in. Thanks!
– EGHDK
Jan 15 '13 at 18:27
add a comment |
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
or
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
Thanks for the user-scalable idea.
– EGHDK
Jan 15 '13 at 18:28
add a comment |
I also though that view port was the problem but after testing it I figured viewport was not the problem.
The problem in my case was the CSS: fixed width, or width: 100% instead of width: auto. So if you find that viewport is not the problem - CSS would likely be your next guess.
Hope that helps!
answered Jan 2 '18 at 21:00
Alexey ShevelyovAlexey Shevelyov
467818
add a comment |
I tried playing with
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
and it seems my site is indeed rendered 1000px wide at scale 1. However, since my phone's screen has no space for the site, the site continues outside the viewport resulting in the feeling that the site is zoomed in.
Setting this value makes the site 1000px wide zoomed out:
<meta name="viewport" content="width=1000">
Is this your issue?
On a side note, 1000px sounds a bit wide for a mobile website, but I assume this website is not originally made for mobile devices?
answered Jan 15 '13 at 14:47
Robert FrickeRobert Fricke
3,2651530
add a comment |
I've had a similar problem. Try this:
<meta name="viewport" content="width=1000; initial-scale=1, maximum-scale=1, minimum-scale=1"/>
I think it has to do with the minimum-scale, but I'm not very sure.
answered Jan 11 '13 at 6:16
nevi_menevi_me
1,75111327
1
Hrm... now it won't resize at all, but it's still zoomed in.
– EGHDK
Jan 11 '13 at 6:18
add a comment |
You can use this.
<meta name="viewport" content="width=100%">
answered Jan 27 at 19:07
SundarSundar
6610
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f14272420%2fwebpage-starts-zoomed-in-on-mobile-devices%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
6 Answers
6
active
oldest
votes
6 Answers
6
active
oldest
votes
active
oldest
votes
active
oldest
votes
initial-scale=1.0 tells the browser to set the zoom level to normal (i.e. not zoomed in or out). You only need width=1000:
<meta name="viewport" content="width=1000">
answered Jan 14 '13 at 11:21
Jeffery ToJeffery To
10.9k11939
2
Awesome. So simple, and thanks for the explanation. I updated my question to show my current code. I added in a user scalable option, so my users don't have the option to zoom in. Thanks!
– EGHDK
Jan 15 '13 at 18:27
add a comment |
initial-scale=1.0 tells the browser to set the zoom level to normal (i.e. not zoomed in or out). You only need width=1000:
<meta name="viewport" content="width=1000">
answered Jan 14 '13 at 11:21
Jeffery ToJeffery To
10.9k11939
2
Awesome. So simple, and thanks for the explanation. I updated my question to show my current code. I added in a user scalable option, so my users don't have the option to zoom in. Thanks!
– EGHDK
Jan 15 '13 at 18:27
add a comment |
initial-scale=1.0 tells the browser to set the zoom level to normal (i.e. not zoomed in or out). You only need width=1000:
<meta name="viewport" content="width=1000">
answered Jan 14 '13 at 11:21
Jeffery ToJeffery To
10.9k11939
initial-scale=1.0 tells the browser to set the zoom level to normal (i.e. not zoomed in or out). You only need width=1000:
<meta name="viewport" content="width=1000">
answered Jan 14 '13 at 11:21
Jeffery ToJeffery To
10.9k11939
answered Jan 14 '13 at 11:21
Jeffery ToJeffery To
10.9k11939
answered Jan 14 '13 at 11:21
Jeffery ToJeffery To
10.9k11939
answered Jan 14 '13 at 11:21
Jeffery ToJeffery To
10.9k11939
10.9k11939
2
Awesome. So simple, and thanks for the explanation. I updated my question to show my current code. I added in a user scalable option, so my users don't have the option to zoom in. Thanks!
– EGHDK
Jan 15 '13 at 18:27
add a comment |
2
Awesome. So simple, and thanks for the explanation. I updated my question to show my current code. I added in a user scalable option, so my users don't have the option to zoom in. Thanks!
– EGHDK
Jan 15 '13 at 18:27
2
2
Awesome. So simple, and thanks for the explanation. I updated my question to show my current code. I added in a user scalable option, so my users don't have the option to zoom in. Thanks!
– EGHDK
Jan 15 '13 at 18:27
Awesome. So simple, and thanks for the explanation. I updated my question to show my current code. I added in a user scalable option, so my users don't have the option to zoom in. Thanks!
– EGHDK
Jan 15 '13 at 18:27
add a comment |
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
or
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
Thanks for the user-scalable idea.
– EGHDK
Jan 15 '13 at 18:28
add a comment |
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
or
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
Thanks for the user-scalable idea.
– EGHDK
Jan 15 '13 at 18:28
add a comment |
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
or
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
or
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
answered Jan 14 '13 at 9:32
user1976613
Thanks for the user-scalable idea.
– EGHDK
Jan 15 '13 at 18:28
add a comment |
Thanks for the user-scalable idea.
– EGHDK
Jan 15 '13 at 18:28
Thanks for the user-scalable idea.
– EGHDK
Jan 15 '13 at 18:28
Thanks for the user-scalable idea.
– EGHDK
Jan 15 '13 at 18:28
add a comment |
I also though that view port was the problem but after testing it I figured viewport was not the problem.
The problem in my case was the CSS: fixed width, or width: 100% instead of width: auto. So if you find that viewport is not the problem - CSS would likely be your next guess.
Hope that helps!
answered Jan 2 '18 at 21:00
Alexey ShevelyovAlexey Shevelyov
467818
add a comment |
I also though that view port was the problem but after testing it I figured viewport was not the problem.
The problem in my case was the CSS: fixed width, or width: 100% instead of width: auto. So if you find that viewport is not the problem - CSS would likely be your next guess.
Hope that helps!
answered Jan 2 '18 at 21:00
Alexey ShevelyovAlexey Shevelyov
467818
add a comment |
I also though that view port was the problem but after testing it I figured viewport was not the problem.
The problem in my case was the CSS: fixed width, or width: 100% instead of width: auto. So if you find that viewport is not the problem - CSS would likely be your next guess.
Hope that helps!
answered Jan 2 '18 at 21:00
Alexey ShevelyovAlexey Shevelyov
467818
I also though that view port was the problem but after testing it I figured viewport was not the problem.
The problem in my case was the CSS: fixed width, or width: 100% instead of width: auto. So if you find that viewport is not the problem - CSS would likely be your next guess.
Hope that helps!
answered Jan 2 '18 at 21:00
Alexey ShevelyovAlexey Shevelyov
467818
edited Nov 20 '18 at 22:33
answered Jan 2 '18 at 21:00
Alexey ShevelyovAlexey Shevelyov
467818
answered Jan 2 '18 at 21:00
Alexey ShevelyovAlexey Shevelyov
467818
answered Jan 2 '18 at 21:00
Alexey ShevelyovAlexey Shevelyov
467818
467818
add a comment |
add a comment |
I tried playing with
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
and it seems my site is indeed rendered 1000px wide at scale 1. However, since my phone's screen has no space for the site, the site continues outside the viewport resulting in the feeling that the site is zoomed in.
Setting this value makes the site 1000px wide zoomed out:
<meta name="viewport" content="width=1000">
Is this your issue?
On a side note, 1000px sounds a bit wide for a mobile website, but I assume this website is not originally made for mobile devices?
answered Jan 15 '13 at 14:47
Robert FrickeRobert Fricke
3,2651530
add a comment |
I tried playing with
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
and it seems my site is indeed rendered 1000px wide at scale 1. However, since my phone's screen has no space for the site, the site continues outside the viewport resulting in the feeling that the site is zoomed in.
Setting this value makes the site 1000px wide zoomed out:
<meta name="viewport" content="width=1000">
Is this your issue?
On a side note, 1000px sounds a bit wide for a mobile website, but I assume this website is not originally made for mobile devices?
answered Jan 15 '13 at 14:47
Robert FrickeRobert Fricke
3,2651530
add a comment |
I tried playing with
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
and it seems my site is indeed rendered 1000px wide at scale 1. However, since my phone's screen has no space for the site, the site continues outside the viewport resulting in the feeling that the site is zoomed in.
Setting this value makes the site 1000px wide zoomed out:
<meta name="viewport" content="width=1000">
Is this your issue?
On a side note, 1000px sounds a bit wide for a mobile website, but I assume this website is not originally made for mobile devices?
answered Jan 15 '13 at 14:47
Robert FrickeRobert Fricke
3,2651530
I tried playing with
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
and it seems my site is indeed rendered 1000px wide at scale 1. However, since my phone's screen has no space for the site, the site continues outside the viewport resulting in the feeling that the site is zoomed in.
Setting this value makes the site 1000px wide zoomed out:
<meta name="viewport" content="width=1000">
Is this your issue?
On a side note, 1000px sounds a bit wide for a mobile website, but I assume this website is not originally made for mobile devices?
answered Jan 15 '13 at 14:47
Robert FrickeRobert Fricke
3,2651530
edited Jan 15 '13 at 14:59
answered Jan 15 '13 at 14:47
Robert FrickeRobert Fricke
3,2651530
answered Jan 15 '13 at 14:47
Robert FrickeRobert Fricke
3,2651530
answered Jan 15 '13 at 14:47
Robert FrickeRobert Fricke
3,2651530
3,2651530
add a comment |
add a comment |
I've had a similar problem. Try this:
<meta name="viewport" content="width=1000; initial-scale=1, maximum-scale=1, minimum-scale=1"/>
I think it has to do with the minimum-scale, but I'm not very sure.
answered Jan 11 '13 at 6:16
nevi_menevi_me
1,75111327
1
Hrm... now it won't resize at all, but it's still zoomed in.
– EGHDK
Jan 11 '13 at 6:18
add a comment |
I've had a similar problem. Try this:
<meta name="viewport" content="width=1000; initial-scale=1, maximum-scale=1, minimum-scale=1"/>
I think it has to do with the minimum-scale, but I'm not very sure.
answered Jan 11 '13 at 6:16
nevi_menevi_me
1,75111327
1
Hrm... now it won't resize at all, but it's still zoomed in.
– EGHDK
Jan 11 '13 at 6:18
add a comment |
I've had a similar problem. Try this:
<meta name="viewport" content="width=1000; initial-scale=1, maximum-scale=1, minimum-scale=1"/>
I think it has to do with the minimum-scale, but I'm not very sure.
answered Jan 11 '13 at 6:16
nevi_menevi_me
1,75111327
I've had a similar problem. Try this:
<meta name="viewport" content="width=1000; initial-scale=1, maximum-scale=1, minimum-scale=1"/>
I think it has to do with the minimum-scale, but I'm not very sure.
answered Jan 11 '13 at 6:16
nevi_menevi_me
1,75111327
answered Jan 11 '13 at 6:16
nevi_menevi_me
1,75111327
answered Jan 11 '13 at 6:16
nevi_menevi_me
1,75111327
answered Jan 11 '13 at 6:16
nevi_menevi_me
1,75111327
1,75111327
1
Hrm... now it won't resize at all, but it's still zoomed in.
– EGHDK
Jan 11 '13 at 6:18
add a comment |
1
Hrm... now it won't resize at all, but it's still zoomed in.
– EGHDK
Jan 11 '13 at 6:18
1
1
Hrm... now it won't resize at all, but it's still zoomed in.
– EGHDK
Jan 11 '13 at 6:18
Hrm... now it won't resize at all, but it's still zoomed in.
– EGHDK
Jan 11 '13 at 6:18
add a comment |
You can use this.
<meta name="viewport" content="width=100%">
answered Jan 27 at 19:07
SundarSundar
6610
add a comment |
You can use this.
<meta name="viewport" content="width=100%">
answered Jan 27 at 19:07
SundarSundar
6610
add a comment |
You can use this.
<meta name="viewport" content="width=100%">
answered Jan 27 at 19:07
SundarSundar
6610
You can use this.
<meta name="viewport" content="width=100%">
answered Jan 27 at 19:07
SundarSundar
6610
answered Jan 27 at 19:07
SundarSundar
6610
answered Jan 27 at 19:07
SundarSundar
6610
answered Jan 27 at 19:07
SundarSundar
6610
6610
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f14272420%2fwebpage-starts-zoomed-in-on-mobile-devices%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
this solution will solve alignment issues too on smart phones! just wanted to post my findings. stackoverflow.com/questions/10402081/…
– user9008566
Jan 9 at 13:50