meta name viewport with No Zoom by default

0
votes

I want my website to fit to mobile devices screens. No Horizontal Scrolling by default, only vertical scrolling. I am using meta viewport as :

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=yes ">

This is not working in mobile web browser, the website is zoomed with showing Horizontal scroll bar. User have to Zoom out and see the content.
Test template of site is waterbill.phed.co.in - meta viewport not working in mobile
how to make site to fit to device width with No Zoom ?

1
htmlcssmobilemeta-tagsmeta
From quick glance, you see to be using fixed width of 930px on #templatemo_footer, #services, #templatemo_welcome etc. Rewrite them using percentage and media queries. – WhatisSober
changing them will completely change the design, is there any other way to do so. by setting manual width ? – PHED Rajasthan
how to build site JUST using width % only, sometimes we required to specify the width in pixel to make accurate design. How to achieve that ? – PHED Rajasthan
You could use min-width and max-width in combination with percentage width. Regarding your previous question, you could use media queries to target specific devices. For example: on iphone, width can be 400px; – WhatisSober
since it is to be developed in mvc4, and in mvc4 css are bundled. how to do that in mvc4. what should i do ? – PHED Rajasthan

1 Answers

0
votes

Most likely, your website displays a horizontal scroll bar because some element(s) have widths that, possibly together with other elements widths, sum up to more than 100% of your available viewport's width. You need to use percent as the unit when styling horizontal lengths. Note that this includes not only the elements' content boxes, but also elements' horizontal paddings, borders and margins. Of course, their sums should not exceed 100%. Also, using box-sizing may be of help to you.