Participant

Question

Correct dimensions for mobile phone pages

Forum|Forum|7 years ago
July 25, 2018
5 replies
826 views

Hi,

I set my table at 450px across, but when I load it on my phone, it's shrunk...

What is the best method to code for mobile phones in Dreamweaver so it's WYSIWYG?

This topic has been closed for replies.

BenPleysier

Community Expert

nickc40153305 wrote
Hi,
I set my table at 450px across, but when I load it on my phone, it's shrunk...
What is the best method to code for mobile phones in Dreamweaver so it's WYSIWYG?

This is what the OP asked; the first two answers plus a couple of others down the line are relevant to the topic, the rest are degrading to personal issues and insults.

I suggest that nickc40153305 starts a new discussion with this question, but elaborating by showing the code that is being used.

For now, this topic is closed.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Nancy OShea

Community Expert

DW is not a WYSIWYG editor. It never really was except back in the early days of web design when everyone used tables for layouts. Those days are long gone. These days, we use responsive CSS layouts.

Height & width of devices vary by make, model, pixel density and other factors. There is no one size fits all. You have to build your projects to respond to whatever device the end user has -- big, small and everything in between.

There are many ways to build a web site. The current trend is CSS Flexbox. And I also like Viewport Units for their simplicity.

1vw = 1% of available viewport width.
1vh = 1% of available viewport height.

See links below for more info.

CSS Flexbox (Flexible Box)

https://tutorialzine.com/2015/05/simplify-your-stylesheets-with-the-magical-css-viewport-units

Nancy O'Shea— Product User & Community Expert

pziecina

Legend

nickc40153305 wrote
Hi,
I set my table at 450px across, but when I load it on my phone, it's shrunk...
What is the best method to code for mobile phones in Dreamweaver so it's WYSIWYG?

First Dw is not a WYSIWYG editor, though it could be argued that it still sells itself as such.

As for the best method to code for mobiles, there isn't one, or rather there are dozens of suggestions.

The one I use is to start with a desktop first aproach, (18-25 inch screens), then to use media-queries to re-style and re-do the layout as I shrink the browser. The media-queries I set at a value just before the layout starts to 'break', which means that I am only using a media-query when necessary.

The reason I start with the desktop first is because at a later stage in development, I will also start to test my layout on larger screen sizes, (up to 60 inch) and again adjust the design and layout also, so that users viewing the pages on smart-tv's or using a game console, will also get an optimal layout.

The estimated number of people using a smart tv or games console for web browsing is estimated at approx 10% of internet users, but no accurate stats are available, as the x-box, (360 and one) use IE or Edge, which report themselves as such.

B i r n o u

Legend

as far as it is mobile phone that is concerned, I will suggest to use vw unit... instead of %

https://developer.mozilla.org/en-US/docs/Web/CSS/length

O

osgood_

Legend

https://forums.adobe.com/people/B+i+r+n+o+u wrote
as far as it is mobile phone that is concerned, I will suggest to use vw unit... instead of %
https://developer.mozilla.org/en-US/docs/Web/CSS/length

Anyone can suggest what they want these days........there's a 101 ways to achieve the same results, that's why web developement is currently in a huge mess....and yes for every one that agrees there is another that doesn't

ie.....do I use React, Angular, Vue, even one of the other js frameworks, maybe stick to jQuery or even god forbid plain js (if youre a dumb ass )........Bootstrap, Materialise, Bulma, Python, Php, Asp........get where I'm coming from? Web development has never been in such a state of disarray.

Thanks a lot guys for inventing all this confusing shite but some of us have to earn a living, not just 'play' around all day trying to invent the next trendy workflow which usually end uop being convoluted anyway, in my experience.

Seriously have you tried to 'load' a page using vue js as opposed to loading a page using jQuery, hilarious?

Why have the new generation of developers disintegrated into trying to produce web-pages as SPA's its like introducing frames all over again without the server load..........phewwy

[Edited by Moderator to remove superfluous expressions}

Jon Fritz

Community Expert

I don't understand what the suggestion of using the Viewport Width unit over Percentages has to do with a rant about frameworks and libraries.

Are you sure you're replying to the right thread?

O

osgood_

Legend

Best method is NOT to use specific px widths. You need to use percentage widths, width: 100%; will fit any size mobile device. Any containers iniside the 100% table wrapper should also be set in percentages widths.

</table>

Css:

.myTable {

width: 100%;

}

You need to also add the 'viewport' meta tag to the <head></head> section of your page:

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded