Prevent BlackBerry Bold from auto zooming in the page? - mobile

Please check the page.
When opening the page, BlackBerry Bold automatically zooms in the page. While the situation is fine on iPhone.
I had tried
<meta name="viewport" content="width=1020">
<meta name="HandheldFriendly" content="true">
or
<meta name="viewport" content="width=device-width">
<meta name="HandheldFriendly" content="true">
but BlackBerry Bold still automatically zooms in the page.
BlackBerry Bold is supposed to act like how iPhone does. Is there a workround to this issue?

Can you try specifying the height and the width? Some thing like this,
Thanks
Naveen M

Related

Site aligned to left on mobile devices

I have setup my dev site for desktop looks beautiful! but then when i go to mobile it is aligned to left with an empty space in the right.
My first thought was because the logo at top is too big and that causes to have that empty space at the right so i reduce the width without solving my issue.
https://www.dropbox.com/s/lh3ldx455m7ohzc/error.jpg?dl=0
you can see my dev site here:
http://dev.pixlgraphx.com/dynmulti/
Thanks in advance
I think it is related to you specifying the viewport twice.
You have:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
.
.
<meta name="viewport" content="width=device-width" />
Try removing that second viewport line, leaving just the first. It seems to be upsetting the page scaling, at least it was for me.

Responsive Web Design Automatically Zoomed Some Times

i made a responsive web page with media query.
view on mobile device it auto zoom though i have not defined to zoom.
while used meta content "width=device-width" it looks like it is viewing on desktop browser after that user have to zoom out to see the actual view.
Use the below meta tag in head
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Website not doesn't scale to fit mobile or tablet devices

Well, I can't release the URL for the site (not live yet), I was running into issues where the website won't scale to the device screen. For instance, I want the entire website to fit on a mobile, and tablet device without user having to manually scale it down. However, when you view the site, it's zoomed in. Below is the viewport tag I'm using. Any ideas?
<meta name="viewport" content="width=device-width, initial-scale=1">
There is no max-device-width value for width. It has to be only device-width. So it should look like this:
<meta name="viewport" content="width=device-width, initial-scale=1">

Web page not resizing on mobile

I have a problem with my web page not wanting to resize according to a phone's width...at least not the whole page.
The example of the page can be seen at: http://sibincic.bobr.si/index_table.html
If I try it on an HTC Desire which has a resolution of 480x800 it resizes it but not all the way.
If anyone has any ideas what I should do please let me know.
You must use that sentence in section, and use bootstrap responsive CSS.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Responsive web design is working on desktop but not on mobile device

I have a website which must be responsive for mobile phones. I've created it using my desktop. When I adjust browser windows it's working perfectly for mobile phone but when I check it on my real mobile phone: Samsung Galaxy S2 it's not responsive to the mobile view.
What could be the wrong?
You are probably missing the viewport meta tag in the html head:
<meta name="viewport" content="width=device-width, initial-scale=1">
Without it the device assumes and sets the viewport to full size.
More info here.
I have also faced this problem. Finally I got a solution.
Use this bellow code. Hope: problem will be solve.
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Though it is answered above and it is right to use
<meta name="viewport" content="width=device-width, initial-scale=1">
but if you are using React and webpack then don't forget to close the element tag
<meta name="viewport" content="width=device-width, initial-scale=1" />
Responsive meta tag
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Resources