I created a fluid site for a client using Susy 2/breakpoint However they want to change the site to show the mobile layout less than 320px and then the desktop zoomed out ( like loading a fixed width site) on any device above 321px.
Is there a way to change Susy setting so I don't have to rewrite it fixed width and should I be aware of anything in the viewport meta tags?
change your meta tag from
<meta name="viewport" content="width=device-width, initial-scale=1">
to
<meta name="viewport" content="width=320, initial-scale=1">
this will set the mobile layout(only portrait mode) at 320px and for the rest of the resolutions it will show desktop version of the site.
Related
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">
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">
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">
I'm working on a mobile site that needs to allow the user to pinch to zoom the page. When I add the meta viewport tag below, and many variations of it, the page does not allow zooming.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=1">
If I remove the tag all together I get the page to allow zooming, however it's initial zoom level is very small and almost unreadable. Yes I understand I am allowing the user to zoom, but the initial page should be readable to most humans, not something around 5px font-size as it is now. Any help on what the issue with the viewport settings need to be to work would be great.
I've never seen "user-scalable" have a value of "1". I believe the default is for it to be on, so try removing that portion all together.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
When creating a mobile optimized web page, im trying to figure out the pros and cons of using device-width vs. fixed width in the viewport meta tag.
Fixed width:
<meta name="viewport" content="width=640" />
Device width
<meta name="viewport" content="width=device-width" />
What is the benefits of using device-width over a fixed width? Because to me the solution of creating a 640px wide webpage with a 640px wide viewport is the simplest to create a page that always fills the entire width of the screen not matter the actual width/height specs of the phone.
I can maybe see some problems when using fixed width if i want to support both landscape / portait? Or maybe it has something to do with your cant use media queries for targetting because it will always asume the fixed width?
I use this viewport:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
I had problems with scaling when I change the orientation of the device, but with this, whatever the orientation (horizontal/vertical) the mobile website fits the phone screen perfectly.