Bootstrap Responsive Site in Browser, not Adapting in iPhone - iphone

I have created a fully responsive website based off of the Bootstrap framework.
In the browser all the responsive features are working exactly as I want them to, however, it doesn't seem to be working on my iPhone. I'm still seeing a full size site.
Has anyone had this issue or would know what might be the cause?

You almost certainly forgot the <meta name="viewport"> tag the Bootstrap docs mention. In your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
edit: Now that you've provided the URL, check out the syntax highlighting on this line:
<meta name="viewport' content="width-device-width, initial-scale=1.0"/>
You've opened with a double quote and closed with a single quote.

Related

How to modify <head> tag in flutter web

So I've got flutter web up and running (pretty amazing work tbh) and I went about bench marking the Button Press Count app that it gives by default on PageSpeed Insights. The results were impressive but there's one suggestion that would seem to increase the score. Is there any way to include <link rel='preload'> for the assets they mentioned?
And would there be anyway to do code splitting as well the way webpack does it for main.dart.js
See the website here: https://flutterdemoapp.netlify.app
You can try to add this code to your index.html file which is under the web folder,
<html>
<head>
<link rel='preload'>
<script defer type="application/javascript" src="main.dart.js"></script>
</head>
</html>
If you already tried that or this doesn't work so you can use this library. It makes this automatically.

speed up initialisation of object page

We are developing a worklist application for Purchase orders. Upon clicking an entry in the table, the user will be navigated to the object view. The issue here is that when the application loads the first time, the resources haven't been loaded yet. The object page contains a fair amount of controls and the first time a user opens the page, it takes a very long time (5-6sec). After that, performance is okay.
Any idea on how to improve performance the first time or how to load the object page (or controls) beforehand?
Worklist view
Pre-loading your libraries in the application's <head> improves startUp performance, using data-sap-ui-libs
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page</title>
<script src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-libs='sap.m, sap.ui.layout,...'
data-sap-ui-preload="async">
</script>
</head>
Check the network tab in your browser's dev tools and see if there are any libraries that are not preloaded but fetched synchronously on-demand. A similar issue and the solution can be seen here: How to load sap.ui.comp.smarttable.SmartTable faster?
Make sure that the debug mode is turned off.
Follow the performance guidelines.

Glassfish can't find my application path correctly?

I always developed on Glassfish, using the deploy feature on it, but it seems that on productio is a little different, it seems that can't find my application path correclty.
I have this domain brainset.com.br, which you can see this screen when clicking on the link:
I didn't configure this Glassfish before, 'cause I don't know how to do it.
The website it's on air (or it should be) and I need to setup glassfish to the correct path.
brainset.com.br // gives the screen above
brainset.com.br/BRAINSET // it's the correct page, my index.xhtml
What I'm missing here ? Sorry if my post lack any information, I will provide soon as demanded, 'cause I don't know what could be useful to the post tough.
Any idea how to fix this ?
I actually found a solution, don't know if is the most correct one, but it works.
I had to acess my hosting account and navigate through the folders to found out where glassfish was installed, so inside /glassfish/domains/domain/docroot I edited this way the index.html file, then upload back the index.html overwriting it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.brainset.com.br/BRAINSET">
</head>
</html>
I think this is not the most correct way, 'cause I think that Glassfish can contain many different applications inside of it, which itself can handle the requests and redirect to the correct application and this way it always go to the same application, but I could be wrong on this. :)

Tiny MCE not working in IE9 when using document.domain

I am using the latest version of TinyMCE which will render in IE9 but I cannot interact with it.
Removing document.domain will allow it work again, but I need document.domain to make the popup windows in tinyMCE work in my setup.
I have tried using <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> and such but this doesn't seem to make any difference.

Media queries : avoid inheritance?

Good evening,
I have a website with a current css optimized for a desktop experience. I am working on an Iphone css, using IwebKit5 to provide a better user experience on the go.
I was using javascript, parsing the user agent to detect which css to use. I was looking for a way to avoid use of javascript, and discovered the media queries feature.
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css"/>
<!--<![endif]-->
<link type="text/css" rel="stylesheet" href="desktop.css"/>
This is what I tried, it works well on desktop (the Iphone css is ignored), but on Iphone I realized that both mobile.css and desktop.css are loaded, so I am trying to find a way to avoid that. What is the option to add in order to avoid this behavior ?
Thanks !
I believe you're approaching this the wrong way.
Include desktop.css first, and let that be included unconditionally.
Then, inside mobile.css, add/override whatever properties you need to.
The vast majority of desktop.css should still be relevant on the iPhone - you should just be adjusting sizes/lengths and other such small tweaks on various elements inside mobile.css.