I am working on a responsive website and the elements on the website are larger than I anticipate. I would like to zoom out or scale back the website such that if the website is loaded in a device of certain width, it would show the scaled down version. I know it can be done using the media queries but I would like to do something less painful and just scale the website down to 0.8. Similar to zooming out to 80% in chrome browser.
You could do:
#media (max-width: 800px) {
body: {
zoom: .8;
}
}
Related
I'm doing responsive web design. When I shrink the screen down to tablet mode and click some buttons, certain CSS properties are applied(things are moved around and others are hidden). Then when I enlarge the screen back to its desktop size. I want the properties to go back to the desktop version. How would I achieve that?
The current behavior is that the effect of the button remains when I go back to the desktop screen ratio.
The expected behavior is that when I go back to the desktop screen ratio, the CSS for desktop applies.
You can access certain properties such as window.innerWidth which you can check to decide whether to run your function or not.
That's for JavaScript. If you want your CSS to be responsive to screen size, check media queries, for example:
#media (min-height: 680px) {
.someClass {
margin: 5px;
}
}
You can use CSS media queries.
#media screen and (max-width: 600px) and (min-width: 300px) {
/* CSS for screen width between 300 and 600px */
}
With JavaScript, you could listen for the resize event.
window.addEventListener("resize", function(e){
console.log(window.innerWidth);
});
I have a web page that renders a drop down. By design, I want to disable the drop down in Mobile. I have used view port size as the criteria to determine whether the current device is Mobile or not. Whenever I am zooming in to 200 percent or higher, the viewport size is reducing and it is inferred as mobile device. Hence, the drop down does not render. I do not want to use navigator.userAgent for this purpose. Any other workaround for this?
Whenever I am zooming in to 200 percent or higher, the viewport size is reducing and it is inferred as mobile device.
What you're describing is the difference between device pixels and CSS pixels while zoomed. As the browser zoom increases, so does the ratio of CSS to device pixels. This is how most browsers are designed to work, and it's what visitors generally expect.
So, if your page width is 1,000px:
at 125% zoom, your CSS pixels will be 800px (1,000 / 1.25)
at 150% zoom, your CSS pixels will be 667px (1,000 / 1.5)
at 200% zoom, your CSS pixels will be 500px (1,000 / 2)
If you want to zoom the page WITHOUT affecting CSS pixels, you could potentially do something custom using the CSS transform property.
body {
transform: scale(2);
transform-origin: 0 0;
}
The problem that I foresee with this approach is that it will necessarily require side-scrolling.
WCAG 2.1 SC 1.4.10 requires that:
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for vertical scrolling content at a width equivalent to 320 CSS pixels
https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
You can use the media query max-device-width which gets the actual device rendering screen size rather than than the viewport size.
For example:
.nav-menu {
#media only screen and (max-device-width: 768px) {
display: none;
}
}
I've just finished my wordpress website for the cabaret of my friend. I did a bit of Javascript to customize the background image and make every page different from one another.
Here's what it looks like on my computer.
Example of my website on Firefox - Windows 7
My problem is, when it comes to my iPhone, the result is really not the same...
Example on my iPhone using Safari for iOS9
So as you can see, the aspect ratio is really ugly on mobile device.
Here's my code I use on this page to customize my background:
<script>
document.body.style.backgroundImage = "url('http://cabarettapisrouge.xyz/wp-content/uploads/2015/11/12235379_10207180605785211_985692315_o-e1447975745789.jpg')";
document.body.style.backgroundAttachment = "fixed";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize= "100% 100%";
</script>
So, has you can see, I use proportions 100% on both width and height to adjust my image, but it's not pretty good on mobile since the screen is different. So I know that.
Is there a way I could use external javascript and say to it 'If on mobile device, then show it that way' ? I'm not really good at Javascript for that part...
Even if it's not an external file, maybe I could just pimp my code to make it work?
Anyways, thanks for your help, I'm pretty sure you can all help me! Thanks!
I think you could try.
document.body.style.backgroundSize= "cover";
or
document.body.style.backgroundSize= "contain";
Reference : https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
How about using #media in the css and load one or another image based on each device or view? (Note that '480px' is for the example, and also you can add queries to handle landscape or portrait views, or more resolutions).
#media (max-width: 480px) and (orientation: landscape) {
background-image: url('url to smaller image here...')";
}
Or change the background style depending on the device as:
#media (max-width: 480px) and (orientation: landscape) {
background-size: 100% auto;
}
Or try CSS width: 100%; height: auto; on the background image.
Hope that helps!
I have made a terrible error. I have built an entire website without making it responsive. Is there any quick easy way to make the whole site responsive so when in landscape mode it all looks exactly like my website on a desktop computer? I am a designer for print but not great with websites as you can see but I really do not want to start the whole site again.
Maybe a media query to with ratios? so the whole site looks the same just smaller and fits on the screen?
Thanks in advance
Try using CSS #media Rule, and specify your styles accordingly.
You can look at plugins that help you do it. RestiveJS is an example.
http://restivejs.com
For the future: the easiest way to implement the #media rules is the usage of em instead of pixel.
http://www.w3schools.com/cssref/css_units.asp
em Relative to the font-size of the element (2em means 2 times the
size of the current font)
if you then want your website to adjust to your screensize, simply use
#media all and (max-width: 768px) { // ipad width in portrait
body {font-size: 0.7em}
}
everything is 30% smaller on devices with a screen width smaller than 769px then if you used em instead of px
I've created an app using Javascript / CSS and HTML, just a simple game, nothing special.. however, when I run the game in xcode (iphone5 simulator) it runs fine, no problems and on an actual iPhone5 device using the ad-hoc method via my Apple Dev Account, but when I try it on the iPad mini and iPad 3 the game only show's up in the top left hand corner inside a what can only be described as an iphone5 size screen. Question is, how using either JS, CSS or HTML do I tell the app (in xcode6) to resize to a device bigger than iphone5.. basically how do I tell the app to resize depending on device, I want to launch the game (hopefully!) for iphone5, 6 and all iPads of course.
I'm using xcode6 and iOS8
Many thanks in advance for any help given.
Would be happy to screenshare over Skype if this is easier to do? (Let me know)
The problem was iPhone has smaller width compare to iPad. You have develop an app for iPhone , so when u simulate it on iPad i only takes width upto 586px or 320px not all iPad width. This width can be adjusted by using media queries.
Add the following media queries with your stylesheet.
Use CSS media queries as follows
html
{
//default styles as you have used(for iPhone 5 as you said)
}
body
{
//default styles as you have used
}
.contianer(wrapper)
{
//default styles as you have used
}
//media queries for iPad
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
/* STYLES GO HERE */
//use width upto 768px
}
//media queries for iPad mini
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{
/* STYLES GO HERE */
}
Use proper width upto 1024px to 768px as it can match with iPad and you can get your app viewable for iPad.
Go to this Link for iphone and ipad styles.