I'm making a prototype sight currently that is static (as in when the screen is resized smaller such as 480 pixels the sight does not responsively adjust its elements ). I actually don't want the sight to be responsive I want it to behave as apple.com does. Apples site is a large zoomed out overview of the site allowing the user to zoom in on what he/she wishes to. Whenever my sight is loaded on my iphone it is zoomed in to a tip corner of the site. When I apply zoom:.5 to the css it zooms out just as much as i would like it to in IE and chrome but does not in Firefox. Obviously that's a major problem being firefox is a very popular browser and i am having difficulties finding an alternative. If any one could offer any amount of alternatives (even using javascript) it would be much appreciated.
If I understand you correctly, you need to set the viewport meta.
Add the following to the head section of your site:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
This will set the initial zoom to fit the entire page, while allowing users to zoom as they please.
this is quite easy...
just do all your code in old fashioned pixel measurements
and nothing will resize and it wont be responsive at all
Related
I am facing a problem on this particular page. http://staging.creativewritingagency.com/contact-us.php
Now, this is not a responsive website. The client only requires that he should be able to view the complete page (without zooming in or out on the mobile screen) in first view. Later, he would pinch in and out to view and read the text.
So I did a bit of research and found that this can be done using viewport meta tag. I inserted the following code to <head> section
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
As per my knowledge, this code should
set the width of webpage to device width
set initial zoom level at 1.
let the user perform zoom actions
However, this code seems to be working only on Chrome for Android. Safari browser on iPhone 6 Plus is still displaying full page. Here's a screenshot of what I see on emulated iPhone 6 Plus on Browserstack. http://prntscr.com/81vs1n
Could someone please look into it and point where I may be doing things the incorrect way.
P.S. This is my first question on Stack Overflow. I am open to suggestions on improving the questioning format.
EDIT - Width of my web page is 1170px.
The width=device-width is the issue.
It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%.
The width of the viewport in pixels. The default is 980. The range is from 200 to 10,000.
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Set fixed width in meta tag not according to device.
So I stumbled upon this link while reading more about viewport. Today I learned that viewport is used to normalize the built in zoom behavior.
Thanks #subodh for pointing me in that direction.
Now, I have updated my meta tag to read like this and it works like a charm.
<meta name="viewport" content="width=1180">
EDIT - Forgot to mention, I removed initial-scale from my actual code. It was causing the page to zoom to 100% original pixels, as a result of which, it had to be scrolled horizontally.
I have a responsive website that I think looks best when it's 500px or larger, so I set the min-width to 500px.
However, I'm testing it on a 320px phone and pages have horizontal scroll, forcing me to zoom out if I want everything on the screen.
Is this a device issue? Or is there some code I can use to make my site shrink by default? (instead of having to zoom out each time I navigate to a new page)
<meta name="viewport" content="width=device-width, initial-scale=.6">
Then just adjust scale to fit what you need
I used bootstrap in my pages, it save you this hassle, try it it is very helpful in many ways.
from here.
and also has many other futures.
this is a google search for free wordpress templates.
I created a responsive design for my website. It's based on the contents of the website being inside a div which has a height of 100% of the window. The problem is that when a user clicks on an input field, the size of the browser shrinks to fit the area between the keyboard and the top url bar on a mobile phone browser. This makes my design look very odd while the keyboard is up.
Any idea how this can be fixed? I haven't seen this happen on other responsive sites, but haven't really observed closely either.
I have the following in the head of my html file:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Basically, I want the area which would otherwise be covered by the keyboard to be hidden when they keyboard is up, not pushed upward and squish my whole layout.
EDIT: I fixed it by doing this
$("#comment-text-area").focus(function() {
var height = $("body").css('height');
$("body").css('height', height);
});
Perhaps you could use javascript to detect when an input field is focused, then set the window's pixel size to whatever it was before the focus, then reset it back to auto when the field is unfocused?
As far as I know mobile browsers not resize the window when the keyboard is show, they only move and cover the window.
Maybe you problem is the way you are achieving the 100% height, is there any vendor specific css or a JS handing the resize events?
You could try adding user-scalable=false; to the viewport meta tag, but more than likely resize-on-field-focus is an un-override-able feature of the browser itself. It's usually a good thing to have, even at the cost of design, because people generally enjoy larger text areas to see what they're typing so I'd personally recommend against using this.
<meta name="viewport" content="width=device-width, user-scalable=false;">
What special meta tags, CSS, etc. do I need to take into consideration when making my website ready to look and function right in Safari Mobile.
I didn't take much consideration to Safari Mobile until I got an iPad. I noticed that the sites I create do not always re-size correctly, look well formatted, etc. Nothing major as I am largely a front end developer.
I searched through StackOverflow and have not found a real specific outline of Safari-Mobile considerations
I am assuming that your site is already designed in a fluid manner. One of the big things for me was this:
<meta name="viewport" content="width=device-width" />
This sets the size of the viewport so when orientation changes it resizes the viewport which allows your design to reflow to the new viewport size.
I'm in the process of building a support page for my pre application.
I'm having a problem where the content on the page is very small, so the user has to manually zoom in to read it.
I've made the page so that there is nothing very wide or tall, but for some reason everything is very "zoomed out" when you first navigate there on the Pre.
I've noticed that sites like wikipedia have versions that are perfectly optimized for the Pre. How can I make my pages start out "full-sized" the way wikipedia does?
Update:
The extremely simple page that I am currently testing with.
On the above page I have tried setting the width for every element to both 310px and to 100%, the result is always the same.
I figure I can accomplish this by giving everything a static width and then making everything use a very big font size. I'm just guessing that there is a "better way", i.e. some way to let the pre browser know that it doesn't need to start zoomed out to the size of a "normal" web page (it seems that the default zoom is about 1024px wide, even though the actual rez is 320px).
I found out the proper way to do this on the webOSDev forums.
The following should be in the header:
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="initial-scale = 1.0"/>
This has the advantage that when the user turns the device into landscape mode, everything scales appropriately, without any styling gymnastics.
Posting a URL of a problem page would be a big help here.
In general, to show nicely on smartphones, the design of the page has to be "fluid" (taking 100% of the width in percent - not specified in pixels) to use the most space in differing screen resolutions. The minimal width supported by the design should be about 300 pixels, to fit without zooming on 320x480 screens.