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.
Related
I'm making a website and want the font size to be readable on mobile, desktop, and also when printed.
I find the default font size on my desktop looks good on desktop, but is way too small in mobile (and often I notice default fonts are way too big when printed).
What's the best practice for setting a font size that is legible on mobile, desktop and print?
Generally speaking you can accomplish this one of several ways. Two concepts that come to mind would be to have a stylesheet that is for web which would control your desktop, tablet and mobile styling. You can then have a separate stylesheet that targets print which is a less complicated stylesheet. You can also use media queries to target media type also. A reference for how to accomplish this can be reference by visiting https://www.w3schools.com/css/css3_mediaqueries.asp
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">
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'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.
I'm just reading up on how to develop sites with responsive layouts. I think I've grasped the idea and can now style content differently, depending on browser dimensions.
However I've also looked into Jquery mobile and I like the UI that they use.
My question is, is it possible to combine the two? ie. Could I have a web page that renders normally when viewed on a pc/mac, but when the browser width drops sub 320px (for example), could I switch over to using Jquery mobile?
I thought this'd be possible by including the jquery mobile scripts in my page, along with the 'data role' attributes, but only including the jquery mobile stylesheet if the browser is a particular size, ie:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 320px)" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
Is this at all possible? I can't tell whether I'm trying to use Jquery mobile for something it's not designed to deal with? Should I just have an entirely separate site ie. http://m.mysite.com that has standalone mobile content? Or is it possible to have an adaptive website?
Thanks!
Yes jQM Supports Media queries:
http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html (Grade A)
http://jquerymobile.com/test/docs/api/mediahelpers.html
http://jquerymobile.com/gbs/
that is a very interesting question...
The answer depends on factors like how differnt the 2 designs are like one below 320px and other above that..
If the difference is huge, having a separate mobile website is a good idea..
But if the difference is minimal, you can just handle that with the CSS Media Queries.
You can combine the CSS Media Queries with Responsive Web Design to handle different sized screens..
The question was not really answered as it was asked.
You cannot use JQM only on the mobile site and not on the desktop verion using only CSS media queries. You'd have to do completely separate sites and do a redirect.
A possibly better option is to use JQM on both mobile and desktop version, in which case CSS media queries work perfectly. The problem with doing that is it limits both how you can use JQM and how you design your site. You really can't take an existing modern desktop design and make it JQM.
The JQM demo itself uses media queries to turn it into a two column layout on desktop and tablet sized browsers, and single column on phones. Issues with doing it that way: the entire page acts like a page, meaning divs such as side menus transition and reload with a new page (which is why they only use the fade transition). Normal AJAX loading of content that doesn't involve the whole page will need to either be made to involve the whole page, or done custom outside the normal JQM way of doing things. Might not be too hard in some cases but it will up the JS code and make certain applications much more complicated. I can also see the CSS getting quickly out of hand for designs that are more complicated than the JQM demo.