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">
Related
I have built a website, and it works fine when viewed on a computer in all browsers. But when I try to view it on my phone, it looks terrible. The header is normal size on the top, but all the page text is aligned on the far left of the screen, with a new line every three words. The structure of my website is that I have a div in the middle with all the content, with a 300px margin on each side. Why would this happen? How do I fix it?
What you are referring to is termed as a Responsive Design.
What is Responsive Web Design?
Responsive web design is to create web sites that look good on all devices.
Responsive web design is not a program or a JavaScript. Responsive web design is a must for mobile devices.
Quoting from a tutorial, here are 3 easy steps for responsive design:
Step 1. Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Step 2. HTML Structure
Step 3. Media Queries
Here's a Demo, and here the source of the demo.
seems to me that you have a responsive design issue.. Look up media Queries. Add them to your site and configure your elements. Try working more with % and em.
An often used framework to create responsive websites is Bootstrap.
I have just finished designing and coding my new project. But I need it to work well in mobiles. I resized my screen to something like 350~400px width and started coding and adding some media-queries to it. Looks great in redimensioned browsers. I have cut some elements and features and everything was fine... until I tested it with my smartphone
The screen isn't big. Less than 4' (probably 3.5). I put some alerts in the code and realised its width was 980px. Almost 3 times bigger than my tests on resized browsers.
Everything is just too small. Other things are great: media queries are working, the cuts I made in the code are OK too, but you can barely see the content in my mobile. This is certainly not I wanted.
I want it to look like an App and indeed it looks like an app on the redimensioned browser.
How do you create your responsive websites to deal with problems like this one?
I read something about using EM (and there is something new called REM) units but I am still very confused about it. Do I have to change ALL the px to em?
And also I know you can set the font-size in the html or body tags and all the other elements will inherit from them. Is that an approach? What do you usually do? Is there a trick or something? I'm not using bootstrap nor any other front-end framework.
You can try adding the viewport <meta> tag :
<meta name="viewport" content="width=device-width, initial-scale=1">
Using the viewport meta tag to control layout on mobile browsers
Use media queries (Link) and percentages (%), 16px (default font size) = 100%. I hope it helps.
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'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.
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.