My website has responsive design, I am loading a page in mobile browser in which many images are displayed one below another. It looks fine, when orientation is changed then everything is resized and displayed properly but different content is shown than what was shown before changing orientation
For example, if there are 5 images displaying one below another in mobile browser and currently 2nd image is displaying and then after changing orientation it shows 3rd image instead of 2nd
I am currently using this::
<meta name="viewport" content="width=device-width, initial-scale=1" />
Plese help
For flexible layouts it’s more practical to base your viewport width on the device in question without setting the zooming parameter. Try the following instead:
<meta name="viewport" content="width=device-width">
Related
I haven't tested it on an android device yet because I don't have one, but when I visit my site on my iphone it looks like the image below. I can't figure out why it loads like that. The site is completely responsive, and I have this in the header:
<meta name="viewport" content="width=device-width, initial-scale=1">
Inside the <header> element of your site, in this div:
<div class="header-ads f-right">
There is a 728x90 google ad, which although it is not visible on your page, is still there and is widening your page and making the rest of your content scale down.
Removing that google ad fixes the issue.
Usually this is because there is some element on the page which is wider than your main content column. Later iPhones tend to zoom out to accomodate this additional content.
Check all the element widths and ensure that none are hard coded values. Use width:100% for full width responsive content.
When viewing my site on mobile device, the site is automatically viewed in mobile version, like the image i have attached below
But i need to view it in desktop view like the image below.
In other words, how to disable mobile view when the site is viewed in mobile device and use the desktop view instead?
It's hard to tell with the information given, but perhaps you're using the meta viewport tag:
<meta name="viewport" content="width=device-width">
If you have something like that in your code, remove it. If your website isn't designed to be responsive, then adding in the meta viewport tag will awkwardly zoom users in.
If you don't want your side responsive, you can manually set a width for the viewport. Add a meta tag like this into your html:
<meta name="viewport" content="width=1024">
where 1024 should be a width that your site looks good. With this number, you can fine tune the appearance of your site.
Also remember to remove any other viewport definitions(especially any width=device-width).
You may have a look at this article: http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design .
If your desire is just to view it in desktop mode / full site for testing (that's what it sounds like to me) and not permanently disable mobile view, than a number of browsers support Desktop view: Android Chrome -> tap on the top right three dots, select 'Request desktop site'.
If you are using this metadata ,just remove it and the site won't be responsive
<meta name="viewport" content="width=device-width">
otherwise you can add metadata for setting your viewport size :
<meta name="viewport" content="width=your-size-in-number">
You may want to read Responsive Web Design - The Viewport
When I load Kickstarter.com on my iPhone, it loads like this
But when I load the site I created, it loads like this
As you can see, for KickStarter, it zoomed all the way out upon load.
For my site, it doesn't zoom all the way out. It is zoomed in to the top left hand corner of my site.
Does anyone know why this is happening? How do I make my site to have same behavior as seen on KickStarter?
thanks
Have you set the proper scaling tags in your HTML file?
You need to have this at the top of your HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Assuming this isn't a responsive design, you need to add viewport meta tags to your page
<meta name="viewport" content="width=1024">
change 1024 to whatever your page width is optimized for
Try adding:
<meta name="viewport" content="width=device-width, initial-scale=1">
in your header of the site. The "device-width" will fit the screen to the devices width.
I am working on phonegap/cordova app. Created few pages in html5, but i can't get them to be across whole screen regardless of the size of the screen. I tried with javascript. Added this script to be activated on load:
function SetupPage(){
document.getElementsById("container").style.width=window.innerWidth;
document.getElementsById("container").style.height=window.innerHeight;
}
But it still has the size of content within it, and i need it to stretch everything depending on the screen size. How can this be done?
set your meta viewport scale
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
You should be able to use CSS after that to size how you need.
I assume this has to do with the retina display and thus everything is twice as small as it should be on the iPhone.
This is the site I'm working on: http://share-the-secret.com/
If you resize the site horizontally to two grid block, that's how it is supposed to look on the iPhone. Currently on the iPhone you see the four grid layout.
I do not want to use media queries to give a custom size for all the elements on the iPhone.
Is there an easier fix for this?
Thanks!
Found the solution!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">