I'm guessing the answer is no but is there a reliable way to make a webpage responsive without adding a viewport meta tag to the head?
I have added a login form container that's 400px wide and centered vertically and horizontally. It looks fine on desktops but it is zoomed way out and looks tiny when you access the page on a mobile phone. Users have to swipe multiple times to zoom in so they can use the login form.
I don't have access to the head. I can only create a container within the body. However, I can add CSS for anything and basic JavaScript. I have limited access because the webpage is generated by a server program. It only allows adding a CSS file and header & footer HTML files. Basically, it limits me to wrapping the form and error container with a custom container.
You can build a responsive websites using CSS's #media rule.
Media queries allow you to apply specific css style's depending on device type an characteristics. Consider the following code, for example:
body {
background-color: yellow;
}
#media only screen and (max-width: 600px) {
body {
background-color: blue;
}
}
This code will result in your page's background color being blue until the screen width is <= 600px.
Read this MDN article for a more detailed explanation on media queries.
You can use JavaScript to program your own responsive behaviors. A simple example would be to scale the html container by the devices pixel density.
"window.devicePixelRatio" gives you the actually number pixels per css pixel. Then scale your container by it:
const pixelDensity = window.devicePixelRatio;
document.getElementById("container").style.transform = "scale("+pixelDensity+")";
Css media queries may not work properly, but again you can use javascript to dynamically load styles based on the adjusted screen size when multiplying by the pixelDensity above.
From a quick glance (at Can I change the viewport meta tag in mobile safari on the fly? for example) it seems you can really create and inject relevant meta tag with JavaScript, like:
<script>
(function(){
var m = document.createElement('meta');
m.setAttribute('name','viewport');
m.setAttribute('content','width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0');
document.head.appendChild(m);
})()
</script>
Test page: you should see wide overflowing dark paragraph before tapping the button which executes above function. After that the paragraph should fit into the viewport.
You can do it with JavaScript, but it can be apply only after the page was loaded, so it's not usefull in your case...
Related
My app has a functionality that loads another route in a iframe. The intention is to change some layout settings, colors etc and see how that page will look in the browser in its final and original version (100% in a desktop or laptop).
The problem is that the iframe is loaded in a div that has something like 2/3 of the system's width (it's a Bootstrap column). This is smaller than our media-query breakpoint and the iframe content is loading the responsive design. But that breaks the rule in paragraph one.
I needed it to be a miniaturized version of the original page.
Is there a way to achieve this result?
What I am trying to do is somehow similar to this on Google's PageSpeed:
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fstackoverflow.com%2F&tab=desktop
THe difference is that Google takes a picture and in my app the user must be allowed to interact with the page, browse other links, click buttons etc. It is a screen simulator/previewer but not responsive.
As CBroe mentioned, the problem is that the CSS for the page loaded within the iframe is using the size of the iframe as it's viewport size. You'll want to size the iframe according to how you want the actual page to display (1200px wide, for example) then use a scale transform to reduce the size of the iframe.
Your HTML could look like:
<iframe width="1200" height="600" src="https://example.com"></iframe>
Then rescale using CSS:
iframe {
transform: scale(0.3);
transform-origin: top left;
}
Here's a live example: https://codepen.io/JoshuaToenyes/pen/gMMLze
I have been working on a modified wordpress site (heavily modified theme), and have run into a css / responsive related issue.
When the body has an unusually large-width item, or a dynamic item (dynamic in terms of width, like a jQuery DataTable) whose width goes beyond the body, the sites header and footer do not properly expand to occupy the full width of the body.
for a live example visit this link (however you will need to use a user-agent modifier or use chrome emulator, either of which set to iPad or iPhone, for example).
image example:
http://vicariauction.com/cars-coffee/
(notice how the header and footer dont expand to the width of the "map" image in the body)
-- here is a link to a screen shot of the above page, showing the exact issue:
i.imgur.com/BUjzLAK.jpg
jQuery dataTables example:
http://vicariauction.com/future-auctions/?ahcode=NOLA%202015
(notice how the header and footer dont expand to the width of the jquery datatable below)
-- here is a link to a screen shot of the above page, showing the exact issue:
i.imgur.com/4nx2M5v.jpg
Both examples, header and footer's widths scale properly if using anything but a mobile or tablet device (or user-agent).
I realize the answer may not be a simple explanation, but can anyone maybe at least point me in the general direction that i should be looking towards for a solution?
thanks!
Instead of making the header wider, why not make the image narrower? Mobile users shouldn't have to scroll horizontally anyway.
To make the image fit the width of the screen, use the following CSS style on the image:
max-width: 100%;
height: auto;
I realize this only answers part of your question, but it's definitely what I would do with the image.
On an unrelated note, I noticed that in future-auctions/styleau.css, line 18, you have the following line:
*{box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
Prefixed CSS rules should always come first, so the correct way to write that line is:
*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
I am using bootstrap 3.0 for my website and i use #media queries in CSS to create a responsive design. I would like to add a button that allows someone on a phone to view the site as they would see it on a larger desktop screen.
Is there a way i can force CSS to think that the max-width/min-width is a certain size? I don't want to actually show scrollbars, just change what rules are applied to match what would be shown for larger screen sizes.
You could manipulate the meta viewport tag to use a specific pixel dimension, an example with jQuery would look like:
$('meta[name="viewport"]').attr("content", "width=1280")
If you wanted the screen to render 1280 pixels into the viewable area.
You will follow these steps
1)add this meta tag to your html page inside of head tag
<meta name="viewport"
content="width=device-width; initial-scale=0.95;" />
2)in css file for every .class you can do this one
#media(max-width:1280px){
.abc{ width:100%;}
}
try to these steps. You can solve your problem
So i have a bit of a predicamenyt. I have a link that displays in an iframe if viewed on computer, and in parent page if on mobile device.
If viewed on the mobile device i only want users to see the page in landscape. So, i have use the following code:
<style type="text/css">
#warning-message { display: none; }
#media only screen and (orientation:portrait){
#wrapper { display:none; }
#warning-message { display:block; }
}
#media only screen and (orientation:landscape){
#warning-message { display:none; }
}
</style>
....
<div id="wrapper">
<!-- page -->
</div>
<div id="warning-message">
please turn to landscape
</div>
However, the problem comes in because of the iframe. If viewed on a computer the warning-message div is shown, not the wrapper content, despite the fact that the computer screen is landscape. I think this is because the iframe is portrait.
Does anyone know of a way to make it so that in non-mobile devices, only the wrapper div content is displayed, not the warning message (ie effectively treat all non-mobile devices as landscape)?
I hope the question makes sense.
Thanks in advance for any help.
No, this is not possible with just CSS. Your assumption is correct that the iframe itself, if taller than wide, will also trigger the portrait orientation rules, since an iframe is essentially a sandboxed browser. You'll get the same result if you open it in a desktop browser that has 'portrait' sizing.
A workaround could be, since you're already detecting desktop/mobile browsers, to add a special GET-parameter to the URL when opening in an iframe, ie. add ?iframe=1 to the URL, and then in the code (or if need be even in JS) detect this parameter to add an extra class to your html or body elements. You can then use this extra class to extend the media query rules.
Having said that I'd heavily recommend against what you're doing right now - media queries are all about making web sites and applications more dynamic, not restrictive. Prohibiting your users from holding their device the way they want to is just going to cause complaints and irritation, unneeded if you just use the same media queries to implement an alternative layout or scale down the landscape content to fit into portrait if aspect ratio is really that important.
I'm working with Visual Studio, ASP.net, HTML, CSS, C# (for the code behind), ADO.net and Javascript/Jquery.
I'm trying to make a web page with some div block and I want that the block never exceed the browser. Do you know : how to add a height size for div even if I change the resolution of my window?
PS: I'm French so, please, don't be matter about my mistake.
Without further clarification of your senario, one method is to do the following:
HTML
<div id="test">
My div
</div>
CSS
html, body {height:100%;margin:0;padding:0}
#test {width:100%; height: 100%;position:absolute;}
Setting height to 100% usually works. NOTE: Sometimes padding may push you beyond the browser.
I've encountered screen resolution problem before and this solved my problem.
If you want your website to dynamically changing whenever your screen resolution change you can use % in your css to all your page, containers, wrappers etc. so that it will adjust on any screen resolution. (problem: This destroys your web design whenever the screen resolution is big)
The best solution I find so far and I think other professional websites also is doing is to make your width static or fixed and just let your page get on the center. This will preserve the design you made on your page and everything will stay and looks as it is.
In your CSS just add this line on your page ,containers, wrappers etc. margin:0 auto;
and your site will be centered to any screen resolution. For more examples and to read more about it check this reference How to Center a Website With CSS. If you want to test different screen resolutions without changing your actual screen resolution you could try it here. Hope this helps :)