Shrink Page to fit mobile phones.

  

Hi,

I'm trying to "shrink" a page to fit a mobile screen like this example (http://www.abola.pt ):

mobile :


Web:



I was hoping to achieve this by altering the viewport meta tag, instead of creating media queries. 

Any advice?



Did you try the "initial-scale=1" tag?

This is what i have now,i haven't changed anything.

As you can see i already have the "initial-scale=1" definition.

I have another question: Isn't weird to have 2 viewports meta tags?

To the first question, why do you actually want to just shrink it?

www.abola.pt is not even a good example for your question as it asks if you want to switch to the mobile version when you access it in mobile...it's impossible to read anything shrunk.


As for the double viewports meta tags, the viewport (and those other meta tags around it) is added by the usage of a block from silk framework called "WidgetsForLayout", that is usually included in the base layout blocks from the Silk templates.

In your case it appears that the block is included twice somewhere in your application.


Regards,
Joao Rosado

and what is the issue exactly?


if you have images set to an absolute size, viewport doesn't really matter?

and why don;t you want to use media-queries?

it's much more logical?



João Rosado wrote:

To the first question, why do you actually want to just shrink it?

www.abola.pt is not even a good example for your question as it asks if you want to switch to the mobile version when you access it in mobile...it's impossible to read anything shrunk.


As for the double viewports meta tags, the viewport (and those other meta tags around it) is added by the usage of a block from silk framework called "WidgetsForLayout", that is usually included in the base layout blocks from the Silk templates.

In your case it appears that the block is included twice somewhere in your application.


Regards,
Joao Rosado

Hi João, i need it because its the first release where mobile is not available, and i don't want to have a
distorted mobile page.


J. wrote:

and what is the issue exactly?


if you have images set to an absolute size, viewport doesn't really matter?

and why don;t you want to use media-queries?

it's much more logical?




Hi J. I'm looking if there's a simple way to do it, because i'll use media queries later to develop mobile pages.



It seems to me a good quick win, going for media queries to the entire site will take longer, this way the user won't be able to use it correctly, but it won't appear completly weird.


I would like also to implement this quick fix in a portal. Does anyone in the community have a solution for this?


Thank you!

Hi Diogo,

If you're using Silk UI, there's no easy way to do it.

For you to be able to do it, you'll need to change silk itself, namely the mechanism responsible for injecting the correct device classes.

I understand the requirement, but with little more effort, you can just make things look okish...


cheers,

RG