I Bootstraperized my asp.net Razor 2 website by implementing what Dan recommended here: Where should I bootstraperize my web site?
In my _SiteLayout.cshtml file, I had this line that was added by default:
<meta name="viewport" content="width=device-width" />
I don't know if that cooperates with the Bootstraperization I've done, contends with it, or is simply now moot/obviated by the Bootstrap code.
I commented it out and there is no obvious difference, but I'm wondering if my brief sanity check diesbezueglich holds water. Is there any reason to strip it out? Leave it in? Does it [not] matter?
On a related note, should I remove or comment out css in Site.css such as:
/* content */
article {
float: left;
width: 70%;
}
IOW, will these style rules interfere with the workings of Bootstrap? I want to avoid a tug-of-war between asp.net's baked-in assistance and Bootstrap.
The viewport meta information is only used for mobile devices, for the zooming and scaling. It concerns the responsive design.
It's not obvious in the current documentation, but here is the explanation from the next version :
To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
(source)
You can read more about this on the MDN : Viewport meta tag (developer.mozilla.org)
Related
everyone! I am working on a project that is based on this template. Everything is OK on the template except for the login page. The problem there is that when someone opens the site over the phone, the page comes out like on a desktop. I opened the original template's login page from themeforest and saw that it is actually responsive, but not for me. Where can the problem lie? Unfortunately, I can't share a link to my project, as it is for a customer.
To view the login page that I'm using - click on Pages and then Login
Probably you are missing the viewport meta tag in your html head.
The viewport meta tag is needed to control the dimensions and scaling of the web page. In your case the display of your login is controlled by media queries, e.g. max-width: 920px. The phones actual resolution is probably higher than that. By adding width=device-width you essentially tell the browser on the phone to scale the page down to the actual screen size, and not use the resolution for the media queries.
It is worth noting that you can add more settings to your viewport meta tag, e.g. to control zoom (you can find more info here).
<html>
<head>
<!-- other header stuff -->
<meta name="viewport" content="width=device-width">
</head>
<!-- document body -->
</html>
insert this into head tag
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
Add this HTML Viewport to you <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I am using semantic-ui-react for my website. I want to make all the components mobile friendly. But when I look at the website on mobile, all the elements are rendered very small. Please find the image below:
How do I make elements appear bigger on mobile? Also I want responsive menu for mobile version. Could anyone please let me know ?
Thanks
do you already have this meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> in your html? I think it is just missing that.
Make sure you have the appropriate meta tag in your HTML between <head></head> and of course reference the CSS (importing in js is fine too):
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/semantic-ui#2.4.1/dist/semantic.min.css"
/>
Thanks Laurens Deprost for the help!
I have fixed this issue. There were 2 problems actually.
The first one was that I was using domain forwarding from godaddy with masking enabled. Due to this entire site was displayed inside a frameset and media queries were not working. To fix this I added a custom domain in Heroku and used that as a CNAME record in godaddy.
Then I also applied css with media queries from here:
https://gist.github.com/phuphighter/ce980aaec1c7104846f7e944743a7e07
With these two fixes in place, the site is working fine.
Thanks
Been trying to debug this for a couple of hours. I've been asked to fix a "responsive" website that is really buggy. I can't share the actual code b/c it's all on localhost on a secured network. Hoping you might see something have a light bulb go off from my description here.
Problem, we have #media (max-width:800px) and it stops affecting page elements around 600px wide.
Another example, i set html{ max-width:1200px} but to make the browser actually fit my 1200 pixel browser window I had to set it to 2250px.
My question is, does this ring any bells for anyone? I'm going through all the CSS and don't see any thing that immediately looks like the issue. These guys really broke responsive design.. bleh
Thanks..
EDIT
here's the meta tags that apply
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
... bunch of junk...
<meta name="viewport" content="width=device-width, initial-scale=1"> (again)
With some help, I was able to resolve the issue.
Issue was related to pixel-ratio declaration but not in CSS, in minified Javascript...
Eliminating this unnecessary js made the page load as expected.
Core lesson: use javascript for functionality and CSS for design and layout.
We removed the meta viewport tag <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0" /> from our HTML emails to increase support for legacy Blackberrys. It's documented to potentially cause blank screens at least according to blogs on major email testing services.
The only downside we've seen in testing is it shrinks the results on Windows Phone HTC HD7. (https://litmus.com/pub/71916b3) In Litmus tests including the tag shows the page at 100% zoom. When it's removed it shows the email zoomed out fit to screen. This occurs even when there are no problems with other mobile platforms.
Is there another CSS technique that could replace the tag and get around this?
The tag is included used in one of the more prominent HTML email boilerplate templates. In practice, we've only seen problems with -webkit-text-size-adjust: none; causing blank BB screens.
We've tried targeting the issue media queries and zoom, but there is too much of a risk of them affecting other phones with similar sizes and pixel densities. Probably another tradeoff, typical of email, but wanted to post because I haven't seen much on this.
The W3C is supporting a CSS solution anyway, though it’ll be a while until it’s full supported. Microsoft seems to be on board with it, however, so you can try that.
The prefix-free syntax is #viewport, and Microsoft uses #-ms-viewport.
I may have come across a solution in testing. I'm not positive that this doesn't cause some other tradeoff and would still be happy to select and award the bounty if there's an answer with a better approach.
I'm seeing no issue with Blackberry's and Windows Phone 7.5 renders at 100%
<!--[if IE]>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<![endif]-->
I have a responsively designed (using media queries) web based training (WBT) lesson. By default, this WBT does not use any frames, for accessibility concerns and etc.
However, when deployed from a SCORM LMS, it uses a file which acts as a frameset, for the SCORM communication. Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title of Course Here</title>
<script src="../common/scripts/scorm.js"></script>
<style>
html, body {margin:0; overflow:hidden; padding:0;}
html, body, iframe {border:0; height:100%; width:100%;}
</style>
</head>
<body>
<iframe src="index.htm" frameborder="0">
iframes are not supported by your browser.
You can access the pages directly here.
</iframe>
</body>
</html>
This page connects to the SCORM API, and includes an onunload to send SCORM Commit and Terminate commands.
The Problem
When this page is viewed through a mobile browser, the CSS media queries (in the content) are ignored, as is sizing on the iframe itself. This is obviously bad, as all of the media query magic is now pretty worthless.
Possible Solutions
The two possible solutions to this (that I can see) are:
Get the media queries working within an iframe.
Enable SCORM communication without a frameset.
Sadly, neither of these solutions seem possible/feasible. Any ideas on how to maintain communication to SCORM without a framset? Or alternatively, how to get media queries working from within an iframe?
Edit 1:
The deeper I look into this, the more I think solution 2 is preferable. Dealing with iframes on mobile seems like all kinds of pain. I used respond.js (hacked to always run) on the content frame, and this did work as expected, but then I ran into issues with scrolling.
Edit 2:
A 3rd solution may be to provide an intermediary window between the LMS and the WBT. This window, with a message to the effect of "Do not close this window" could hold the reference to the SCORM API. Not so elegant from a user experience perspective, but it does seem to be the least hacky of the 3 solutions.
I know that this is very late, but I wonder if you ever tried setting the viewport setting on the <meta> tag on the page containing the iframe/frameset:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
This may not work well with iOS due to the way that iframes & frames are handled (resizing to fit the content)...
The second option is going to work and you can use a timer to send LMSset() to the API. Some new browsers, like Chrome, have problems with onunload. The timer solved it.
I was facing the same issue jst place this code in head of html page and enjoy...
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0, user-scalable=yes">