Which Viewport Width?

Responsive designs are the current and the future, but how do you build yours? When you build a responsive website one of the key parts is the view port. This tells the browser details on how to view the website it is requesting. The question is what do you tell it?

Lets start with his it looks and what is available in this tag. The viewport is a meta tag that contains the data as you can see from below.

<meta name=”viewport” content=”width=device-width, user-scalable=no,maximum-scale=1,initial-scale=1″>

The width defines how the browser views the website in scale. The discussion I bring is do you specify the width or do you leave it to the device width to decide?

If you use the ‘width=width-device’ then the width of to website will be scaled to the width of the device. So if you phone is 365px like the iPhone, then you website will be displayed with that width. This is how I describe fully responsive as, if you are going to design and build in this way then the website will responded to the width of the device. The thing is though this comes with it’s own con’s and pro’s of use.

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

(adsbygoogle = window.adsbygoogle || []).push({});

Pro’s

The pro’s of using this method is that when you build this amazing website you can take pride in the build. You did it the difficult way, but the most fluent way. When you scale down your website you will see the transition down to the specifically designed mobile view. It is an excellent thing to put on you CV as it shows the level of skill to make sure that as you shrink your window everything stays inline and in all browsers.

Con’s

Although this is all good, it is still the hard way about it. If you have just done an amazing mobile perfect design and then Samsung brings out a new bigger phone, then your design changes. You can have a fully responsive website and please every device, as they are all different width and heights. In the end you start to compromise you design to make it better for all browsers and easier to build, which is never what you want to do.

 

The other method would then be setting the device width to a pixel size. This would mean if you built you website to 767px(phablet) then all devices will view the website at that width. The browser will just scale the content to the device size. The sort of problem is you then rely on the JavaScript to set it for the correct device. As a .net developer, I used a number of method to detect the device size and failed, there fore I had to use JavaScript. The problem I have with this is, like I said in a previous post, what if that person has JavaScript off or the company they work for blocks JavaScript on their proxy. These days this is not a problem, so you can use it and I have it attached below.

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

(adsbygoogle = window.adsbygoogle || []).push({});

So back to the attribute width and the pro’s/con’s of using it.

Pro’s

You do one design and that will be the design of all of the devices. This then get consistency and makes sure everyone views the intended design. This also makes it easier to develop for as you don’t have to build for all devices, just one which is one size. If you make the container 767px width and the viewport 767px, then it will view it like that.

Con’s

It is just not as elegant. You will basically be building different websites, which doesn’t feel like you are building responsive. I would say this method is mobile optimised only. This shows skill level but I wouldn’t think as much as a fully responsive build.

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

(adsbygoogle = window.adsbygoogle || []).push({});

Which method do you use and why?

Viewport example

<meta name=”viewport” content=”width=device-width, user-scalable=no”>

JavaScript for screen size

        if (window.innerWidth

            // Phone

            document.querySelector(“meta[name=viewport]”).setAttribute(‘content’, ‘width=767; user-scalable=0’);

        }

        else if (window.innerWidth

            // Tablet

            document.querySelector(“meta[name=viewport]”).setAttribute(‘content’, ‘width=1024; user-scalable=0’);

        }

   

 

UPDATE

I have found a bug in Windows phones that are just not listening to the viewport. So after a long look into why and how to fix I have found the solution!!

As well as the viewport meta tag you need to also set the ‘HandheldFriendly’ and ‘MobileOptimized’ meta tags as below:

<meta name=”HandheldFriendly” content=”false” />
<meta name=”MobileOptimized” content=”device-width” />

These help as they are the orginal tags, but the way to fix the whole problem is by CSS. when you do your media tag in your Stylesheet, you must use device with like below:

@media screen and (max-device-width:767px){}

This will capture the Windows phone as it doesn’t listen to just ‘max-width’. once you then have this in you can set the viewport vis CSS as demostrated.

This is the plain CSS below:

@-webkit-viewport{width:1024px}
@-moz-viewport{width:1024px}
@-ms-viewport{width:1024px}
@-o-viewport{width:1024px}
@viewport{width:1024px}
 

The full example is:

@media screen and (max-device-width:767px){
@-webkit-viewport{width:767px}
@-moz-viewport{width:767px}
@-ms-viewport{width:767px}
@-o-viewport{width:767px}
@viewport{width:767px}
}

user-scalable

This is the key to if the user can zoom in and out of the website page. If you have created a great mobile optimised website then the user shouldn’t have to zoom in. Also if the website would break if you do zoom in then it would be wise not to let them do that. You may however want then to scale in so they can read text easier, have a closer look at an image or just get a better view, but then this is not a good mobile website.

initial-scale

This is the same as the above attribute, but it’s how it starts. This could be good if you don’t have a mobile optimised website, to have it zoomed in on a welcome paragraph.

maximum-scale

The attributes before do the scaling, but this attribute will tell the website how much it is aloud to scale to. This can then give the user the flexibility to zoom, but not enough to ruin the websites appearance.

Advertisements

Leave a message please

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s