How to make a webpage load to a particular resolution? - javascript

I have designed a (non-responsive) website in my machine which has a native resolution of 1920x1020. But, most of the machines nowadays come with 1366x768 resolution in which my website looks jagged up. I want it to load in a particular fixed resolution. How can I do that?

You cannot.
Browsers provide no API to reconfigure a user's graphics drivers.
Even if it was possible, it would be a terrible idea since modern screens tend to give poor rendering when not run at their native resolution.

Designing a site that only looks good in 1920x1020 is not a good idea. There are two basic options:
Wrap all your content in a <div> which has a fixed width. Then use that width as the basis for your design. Use margin-left: auto and margin-right: auto to get the content in the middle. This is the way Stack Overflow is designed. On a bigger screen there will be empty space on the sides. On a smaller screen there will be a scroll bar.
Create a responsive design that properly scales down. Harder but better.

There are browser addons that can help you on this. They resize your broswer to sizes that you want to test. for chrome you can use this extension
https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal
You can find firefox addons with similar functionality.
If you want a rough check on how responsive your site is then for checking on a higher resolution zoom out in your browser. for lower resolutions you can zoom in. but the disadvantage here is you can only visualize in resolutions that are of same aspect ratio of yours so you need to resize the browser to that particular aspect ratio and then do the zooming.
Hope this helps.

at the beginning that's all you need to do
body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#mainContentDivInsideBody{
margin:auto;
width: 990px; //or more
height: 100%;
}

Related

How to make this banner slider to fit the browser height?

I googled for 2 days trying to understand how the auto height fit works, I think I understand in how to make a background fits the browser, but with this banner slider, I don't have a clue.
Could someone please enlighten me on where should I look for/start? Should it be a CSS or JS?
I'm very new to HTML5/CSS3, Wordpress gave me a very easy environment to start a website, but I just barely know how to modify a website other than a plugin.
It would be very cool if the slider section to fit like this one below
Thanks in advance!
This should set the image/album you have on the homepage to be the height and width of the browser, tweak some of the CSS and it should line up with the Sidebar perfectly like you wanted.
img {
max-width: 100%;
height: auto;
width: auto\9;
}
If you are looking for the image that fits the browser height regardless of any display then you can use 'vh' unit from this css units page.
vh means viewport height[viewport = the browser window size.], and 1vh = 1% of the height of viewport, so in your case you can use 100vh for image like this:
img{
height: 100vh;
}
Check this jsfiddle for the same.
Remember that you need high-resolution images and those images will not look good on mobile devices.

Make an image responsive by height AND width

I am working on a site for a client, using a purchased Wordpress theme (so all the code is not necessarily mine, but I can pull something if needed).
The landing page has a responsive background image. On top of that, I need to use images to show the relevant logos (the fields where I input this were intended for text, but they allow images with no problem). The image has a border wrap around it also, and then people can scroll down from there to see the rest of the content.
My problem: on desktop, the logos will rescale with the WIDTH fine. But one of my clients is viewing in a very widescale-oriented browser window (which I figure is unusual across all users, but it's the client!), and the logos do not rescale with HEIGHT changes, so they get cut off by the border wrap.
I've tried things like
.home-section img {
max-height: 50%;
}
Which is what the theme's developer provided initially, and also changed 50% to 50vh (just trying some things I came across online, not a code expert by any means), and also a variation of this solution HERE
with no luck.
My (again, partial) understanding is that since the height of the div with the background image isn't set explicitly, I can't use a percentage height for the logo/child element, but is there a way to solve this?
I'm currently using srcset to get the logos the right size for mobile, but that's not a perfect solution. I figured there may be a javascript solution too, but I'm only about 75% with HTML & CSS and not much with JS/PHP without explicit directions. (Call it capable, but inexperienced).
You can view the issue HERE.
Thank you!
=================================================
EDIT:
A coworker came across this solution, which improves things greatly. The issue still happens at a short enough browser (IE landscape phone viewing, etc), but works on a greater range of viewport sizes:
div.home-section-image {
min-width: 600px;
max-width: 1080px;
min-height: calc(690px * (90/150));
height: 100vh;
width: 100vh;
}
The logos now scale vertically to a point, though the viewport height can still catch them and cut them off, but at a better threshold (at ~550px high, where it happened at ~720px high previously - now well beyond a normal person's minimum browser size, my understanding is ~760px is average).
I tried to combine this with #kburgie's code suggestions to keep the logos completely above the green border, but my results ended up pushing the logos off the TOP of the page instead, which is worse (for me, on a horizontal Galaxy S3, I can at least get the main square of the top logo to display, which is enough for me at that size).
Thanks to everyone who helped - I think this may be the best solution I can pull for now!
Seems like you should be able to combine width and height media queries to catch that edge case:
#media (min-width: 1200px) and (max-height: 500px) {
.home-section img {
height: 200px;
width: auto;
}
}
I don't have enough rep to comment or I would. I think isherwood's media query is too specific.
Responsive images should already be responsive by height AND width, and the best way to handle that is by working with the image width.
This is a dangerous selector and you should get rid of it:
img {
height: 100%;
width: auto;
}
It will affect ALL images on your site. You should use a class instead. Beyond that, your images are already set to max-width: 100%, which is all you need.
Focus on your positioning instead
Step 1: Remove your margin top and bottom
.home-section .container { margin: 0 auto; }
Step 2: Absolutely position the image container at the bottom of it's parent. Then it will always stay above the green border. Stick it in a media query if you'd only like this positioning above a certain screen size.
.home-section-image {
position: absolute;
bottom: 10px;
}

Resizing images to fit smaller browsers

I've been searching the questions here for weeks and haven't found an answer to this, so here it goes:
I created a fairly large image (800x1000px) to be displayed in the center of my site. I made it so large with large screen resolutions in mind but I've been using the CSS max-width: 100%;
max-height: 100%;
to have it resize proportionally to fit on computers with smaller screen resolutions as well. (keep in mind this is not a "background" image)
However, what I'd really like, is for the image to resize only when keeping it at the current size would create a horizontal scrolling bar in the user's browser. However, if it will only make a vertical scrolling bar, I'd like it to not resize the image, that way it can be as large as possible (the reason being that I feel a horizontal scroll is less professional looking than a vertical scroll as most sites have a vertical scroll anyway).
Is there a way to accomplish this with CSS or will I need Javascript? And if I'll need javascript please spell out the code as I have absolutely no experience with javascript, thanks!
Just remove max-height: 100%, leaving only the max-width: 100%.
Demo
img {
max-width: 100%;
height: auto;
}

iPhone mobile web app retina image replacement

I am creating a web app to be accessed through any smartphone. I have the index.html file here:
http://www.mediafire.com/view/?hy2jttea705ukpw
I have 2 jQuery functions on it. One is to detect if it is an iPhone the user is viewing the web app through and comes up with a little bubble, detailing instructions to add it to the homescreen. The next is a script to replace images with the retina images in my root folder with "#2x" in the name.
This is my problem. It works SOMETIMES and it doesnt always find the retina images to replace the original. Any ideas?
You can view the project at www.iammarksummerton.co.uk through an iPhone to see what I mean
I looked at your app in there and think I see the problem. Assuming the images which arent showing up are those with the #2x suffix in their name, the problem is they are returning 404 errors.
Its possible the images are innacessible due to something in the htaccess.
Its possible the path to those images is wrong
Its possible the images are simply not there
PLease check for that, and that may solve your issue
IMPORTANT With that said however, I'd advice abandoning using javascript to look for this retina images and instead going with a css route. I love javascript, but its overkill for what you are trying to do.
Each of those images with the css class .heading could be drawn with code. I assure you it will make your app load faster as a bonus. This is how id replace that with css. I tried it and it looks exactly the same, but did not require images to be replaced.
**The html would be something like for each of those heading divs**
<p class="heading">Can I access your social media?</p>
**The css would be like**
.heading {
min-height: 53px;
border: solid 2px #FD8B25;
border-radius: 5px;
line-height: 53px;
text-transform: uppercase;
font-weight: 600;
font-size: 13px;
padding: 0 12px;}
.heading:after {
content: '▼';/*You can replace '▼' with url(path/to/image) if needed */
float: right;
}
This wont replace the image but will look ultra sharp as its code based. If you still want to change your images to sharper ones through css avoiding the slower overhead of javascript. Use this...
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
.myCSSClass {
background:url('path/to/image');
/*in the case of an image tag, add lots of padding margin so that original image is not visible*/
}
}
Hope this helps. To avoid this resolution issues, always try to use code over images if you see no issues with this. Only time I see this being an issue is if you must support old versions of IE, and you must keep every graphical element. For image heavy websites, I usually avoid optimizing the images to be retina optimized. Fast load time is sometimes more important than high resolution.
There is no clear cut solution for responsive images at this time. Chris Coyier outlines a few of our options.
No matter which you choose do not serve 2x images to iPhones only. For one, not all iPhones have retina displays—second if you're trying to build something somewhat future-proof, you'd want to target pixel density, not one model of a phone. Other brands and operating systems will probably have high-DPI screens in the near future. In the end it will be less work for you.

Better way to auto resize images mantaning aspect ratio?

I am using this code to auto resize images to the window size on a mobile page:
img {
width:100%;
max-height : auto;
max-width : 480px;
}
My intention is to show the image in the right size of the window on small screens and max 480px on bigger screens maintaining the ratio.
But for some reason i dont know when i use that code the text around the image goes behind it.
Theres a way to achieve this result using another method like Java or Jquery and avoid this problem?
If you do this for mobile devices I would recomend server resize to save download size.
Regarding the text that goes behind, do you have a more comprehensive testcase showing the actual document this CSS applies to?
You'll end up with squished images if you do that. I think this gives the best result you can achieve with CSS:
#content img {
width: 100%;
height: auto;
max-width: 480px;
}
I added this code in my page and it's working:
img {
width:100%;
max-height : auto;
max-width : 480px;
}
Have you tried using different style sheets for different screen sizes? Then you would just need to write the code for each situation and then load the needed style. It would also come in handy if you have other styles that need to change based on size. Very helpful on mobile sites.
<meta content="width=device-width, initial-scale=1.0" name="viewport">
helps to make sure it scales right. Not sure how helpful it will be, but hope this link helps.
CSS trick for specific style sheet
I've also played around a little, and it seems to work if you set the image as a percentage. I floated one to the left of text and at 50% of the screen and it re-sized text and all. If you need me to post an example, just ask.
use #media to do manual change by the mobile, tablet or desktop size.
by the way mobile and tablet will have landscape and portrait. if you using google chrome to check you can determine it better. sample of website : Media Queries: How to target desktop, tablet and mobile?

Categories