I'm developing an iPad web app exclusively for the Retina display.
So I was wondering what's the correct way to serve HTML content that fits in the Retina Display.
Because if I use this meta tag
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no">
the page is way bigger than the iPad screen and seems to ignore the fact that my body has a width of 2048px.
Is this some sort of compatibility thing?
Setting the initial-scale=0.5 seems to solve this issue, because the screen fits to the body.
But I'm not sure if this is the correct way to serve the Retina display.
Can anybody help me out here?
The Retina display works by having twice as many 'hardware/actual pixels' as 'logical pixels' in each dimension. That is, as far as the browser's concerned, you're still rendering to a display of 1024x768 (or whatever the screen-minus-chrome size is).
You should set your layouts up for that standard size, and use initial-scale=1 - then both retina and standard resolution displays will render the content the best they can.
Extra info, based on Johannes' comment below:
If you have a 'native resolution' .PSD (2048x1536px) to turn into a layout, this is how I'd do it:
Work out what image-based assets you'll need: things like textures, fancy icons, images that can't be done with CSS (you can and should use CSS for gradients, shadows, transparencies, etc). Mark these with guides/slices so you can extract them to their own files conveniently.
Duplicate the document and scale it to 50%: this is the 'logical pixels' document that you can use for taking measurements. If you need to answer 'How high is the header?' or 'what is the size of the text in the menu?', this is the document to use.
Extract the image assets from both the original and 50% scale docs. Name the original scale assets with a '#2x' suffix (so you have body_background.png and body_background#2x.png).
Set your html pages to use initial-scale=1, and dimensions to the 50%/logical pixels measurements. So - your overall page width should be 1024px, not 2048px.
Code your CSS according to the logical pixels dimensions. Reference the normal-resolution assets from the 50% scale document as required.
Use a media query in your CSS - querying device-pixel-ratio - to switch in the high-resolution assets as required.
This will give you a high-resolution retina display on retina devices, and a normal-res display on other devices. You won't get any noticeable increase in quality by creating everything at double size and scaling it down - certainly not enough to warrant working at double dimensions all the time.
Other people might have better workflows for the asset creation stuff - I don't do a lot of PSD -> layout work at the moment, but this works well enough for me.
Related
Hello,
I created new React App a few days ago and I have a problem.
All elements are bigger, than on the design although it is the same size (1920x1080). And that's because my default system scale is 125%. When I have changed it into 100%, it worked fine. But I want my app to be well displayed on all my users devices (even if they have scale 125% as system default).
In my index.html I have this line:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Do you know what's the problem with it?
As Codesigner mentioned, changing the scale via the web browser changes the width and height of the window (i.e. window.innerWidth and window.innerHeight). The browser then renders the webpage onto the window and scales it to match the dimensions of the viewport.
From the viewpoint of your website, this is equivalent to a change in the size of the browser's window which means you should handle it with CSS media queries.
But keep in mind that users making use of the browser's zoom functionality are likely to have a reason to do so (e.g. bad eyesight) meaning you shouldn't scale down your website when a user actually wants to scale it up.
In addition, it is not possible to detect whether a user uses the zoom functionality or actually uses a device with a different physical screen resolution. You might break the responsiveness of your website.
when you change scale it updates logical resolution of system. setting it from 100% to 125% it reduces screen width for media query.
Try to handle ot using CSS media query.
I have designed a website. When I opened the final website in different PCs which have different resolutions my webpage is not the same I designed. The contents are out of body position.
Could any one explain the reason?
And any solution?
This is an issue many developers are facing.
The problem is that my screen (or even your screen if you resize the window) will make the page look different, if you use px to control the position of all your divs.
I would suggest you learn a little about CSS and how to use it (including using units other than pixels).
It is handy to know when to use auto, %, px and other things that you need to know to make your webiste look the same across as many devices as possible.
W3 has a good Responsive Web Design - Introduction that you might want to check out.
Ultimately it teaches you what a responsive design is:
It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.
The topics the introduction covers include:
Intro
Viewport
Grid View
Media Queries
Images
Videos
Frameworks
Good luck! Hope your project goes well!
Use px units so that it does'nt change the size of the image and add the following code to head tag before the body tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
My website, redkrypt.com, is working perfectly on my laptop, but the css will only load on my iPhone 4S after I rotate it once. After I do so, it works both vertically and horizontally. I've tried everything I know including adding
<meta name="viewport" content="width=device-width,initial-scale=1">
and distinguishing between with and device with in my media queries, but nothing seems to work. Any suggestions?
Think this is because you are using media queries in the link tags instead of in the css itself. The browser then loads the files based on the queries and the current screen size, instead of all at once (which also would be not very efficient in your case!). So for each defined size, you now have a separate css file which also uses redundant styles. Think you are better off with using ONE CSS file, and set the media queries inside. This way maintenance should be way easier and you also will avoid the problem you mentioned. Also, why do you use this many screen sizes? Usually you shouldnt need to add more than 3-4 sizes, but you already have 10 files. Also consider using percentages in your layout instead of fixed pixel values, your CSS isn't really responsive anyways, i.e. still fails at many sizes. You can test your responsive design also in a desktop browser by simply narrowing your window. Make sure content isn't cut off at any size.
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.