Highlighted

Page not displaying as responsive

Explorer ,
Jun 28, 2018

Copy link to clipboard

Copied

I'm just a begginer when it comes to coding and this is my first real site made with Dreamweaver. The home page went weel and it is perfectly working, but the first internal page is getting fit by its height in mobile devices, browser widths lower than 1024px.

Does somebody has any idea what the problem could be?

I have just figured the problem out: it was in the "viewport" meta tag, in the home page I used it like this <meta name="viewport" content="width=device-width"> and it worked just fine. I saved this page as and built the second page up on it, but this time I got the problem with the page displaying wrongly in mobile devices (tablets included). I have tried an additional attribute to the tag: <meta name="viewport" content="width=device-width, initial-scale=1">

I made a research and one of the pages of Mozilla, has gave me the answer, which consists in adding another attribute, like this: <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"> and that worked!

You will find more information about this here: https://developer.mozilla.org/pt-BR/docs/Mozilla/Mobile/Viewport_meta_tag

Views

196

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Page not displaying as responsive

Explorer ,
Jun 28, 2018

Copy link to clipboard

Copied

I'm just a begginer when it comes to coding and this is my first real site made with Dreamweaver. The home page went weel and it is perfectly working, but the first internal page is getting fit by its height in mobile devices, browser widths lower than 1024px.

Does somebody has any idea what the problem could be?

I have just figured the problem out: it was in the "viewport" meta tag, in the home page I used it like this <meta name="viewport" content="width=device-width"> and it worked just fine. I saved this page as and built the second page up on it, but this time I got the problem with the page displaying wrongly in mobile devices (tablets included). I have tried an additional attribute to the tag: <meta name="viewport" content="width=device-width, initial-scale=1">

I made a research and one of the pages of Mozilla, has gave me the answer, which consists in adding another attribute, like this: <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"> and that worked!

You will find more information about this here: https://developer.mozilla.org/pt-BR/docs/Mozilla/Mobile/Viewport_meta_tag

Views

197

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 28, 2018 0
Adobe Community Professional ,
Jun 28, 2018

Copy link to clipboard

Copied

Could you share a link to your work in progress so we can take a look in our browsers?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2018 0
Explorer ,
Jun 28, 2018

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2018 0
Explorer ,
Jun 29, 2018

Copy link to clipboard

Copied

I have just figured the problem out: it was in the "viewport" meta tag, in the home page I used it like this <meta name="viewport" content="width=device-width"> and it worked just fine. I saved this page as and built the second page up on it, but this time I got the problem with the page displaying wrongly in mobile devices (tablets included). I have tried an additional attribute to the tag: <meta name="viewport" content="width=device-width, initial-scale=1">

I made a research and one of the pages of Mozilla, has gave me the answer, which consists in adding another attribute, like this: <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"> and that worked!

You will find more information about this here: https://developer.mozilla.org/pt-BR/docs/Mozilla/Mobile/Viewport_meta_tag

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 29, 2018 0
LEGEND ,
Jun 29, 2018

Copy link to clipboard

Copied

The user-scalable=no attribute is now depreciated in iOS and the newer android devices, (though not all).

They now ignore the attribute and allow the end user to scale by default.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 29, 2018 0
LEGEND ,
Jun 29, 2018

Copy link to clipboard

Copied

For those who do not understand Portuguese, here is the English version

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 29, 2018 1
Explorer ,
Jun 29, 2018

Copy link to clipboard

Copied

Sorry.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 29, 2018 0
LEGEND ,
Jun 29, 2018

Copy link to clipboard

Copied

Not a problem, eWitamar.  I clicked the link and got the Brazilian version, and just thought I'd be helpful providing the English version.  No worries, mate.

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 29, 2018 2