I have a 1513x1079 image which resizes great when I resize my desktop browser.
However, when I open the same webpage on my android phone, everything shows up great, except the image. The whole page resizes properly, but there is no picture. There is only a tiny picture icon in the upper left corner.
Is there some upper limit to image dimensions for phones?
If so, why is there such a limit?
Does image responsiveness have some sort of dimension limit?
HTML Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name = "viewport" content = "width=device-width, initial-scale = 1"/>
<title>Projects web page</title>
<link rel="stylesheet" href="bootstrap.min.css"/>
<script src="jQuery-3.3.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "container-fluid">
<div class = "row">
<div class = "col-md-6" id = "picture">
<img src="R1lr_cut.jpg" alt = "R1 Engine" class = "responsive"/>
</div>
<div class = "col-md-6" id = "home_text">
<h1>Inline 4 Engines</h1>
<ul id = "links">
<li>Home</li>
<li>Details</li>
<li>Calculate</li>
<li>About</li>
</ul>
<div id = "filler_text">
<h4>Historic information</h4>
<p>
The first across-the-frame 4-cylinder motorcycle was the 1939 racer Gilera 500 Rondine, it also had double-over-head camshafts, forced-inducting supercharger and was liquid-cooled.
</p>
<p>
Modern inline-four motorcycle engines first became popular with Honda's SOHC CB750 introduced in 1969, and others followed in the 1970s.
Since then, the inline-four has become one of the most common engine configurations in street bikes.
</p>
<p>
Outside of the cruiser category, the inline-four is the most common configuration because of its relatively high performance-to-cost ratio.
</p>
<p>
The success of the Honda CB750 and the Kawasaki Z1 got the attention of the Germans over at BMW. The Honda especially had been an industry game changer.
BMW’s motorcycle engine at that time was a horizontally opposed “boxer” twin cylinder engine that the company had settled on when they reverse engineered a British Douglas motorcycle with a boxer engine mounted longitudinally in the frame at the end of the First World War.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Code :
body {
background-color: #000000;
}
.responsive {
width:100%;
height: auto;
}
#picture {
padding-right: -10%;
padding-top: 3%;
width: 100%;
}
#links li{
list-style-type: none;
float:left;
/*outline : 1px solid yellow;*/
width: 14%;
margin-right: 11%;
padding-top: 0.5%;
padding-bottom: 0.5%;
}
#links{
/*outline: 1px solid red;*/
width: 100%;
padding-left: 0.5%;
}
a {
/*outline :1px solid green;*/
display: block;
text-align: center;
padding: 3%;
color: #666666;
}
a:hover {
background-color: #333333;
color:#66ccff;
}
#home_text {
background-color: black;
padding-top: 8%;
color: #FFFFFF;
padding-left: 0%;
}
#home_text h1 {
margin-left: 5%;
/*outline: 1px solid purple*/
}
#filler_text {
padding-top: 12%;
margin-left: 5%;
}
Make sure your image size is set in percents, not in pixels or anything else.
Example:
<img src="yourimage.png">
<style>
img{width: 100%; /*100 can be any, but will fit 100% of the block*/}
</style>
You can also make your image a block background: `
myimg{background-image: url(“pic.jpg”); background-size: cover;}
Sorry if syntax is wrong, just typing from my phone. Also you can try doing like this instead of making it a block:
img{display: inline-block;}
`
If this doesn’t help change inline-block to block.
Related
In my testing so far Chrome with mobile inspector or actual Android phone (my Pixel 6) both are experiencing incorrect dragging behavior if there is an overlapping element that has pointer-events: none on it. Amazingly it's working as expected in iOS.
Here's a quick code sandbox I made that shows the issue, you can toggle the overlay on and off and feel how the dragging behavior changes.
https://codesandbox.io/s/brave-violet-bnn8xo
Issue tested on Mac/Chrome and Android Pixel 6 Chrome latest.
Anyone else have this experience?
Edit: to be clear, the issue is that you can't interrupt a throw in progress, like immediately changing your swipe direction after you swipe one way, it gets stuck, doesn't snap, and you need to lift your finger off and reapply to get it working again.
function Main() {
return (
<div className="App">
<p>The blue transparent overlay has pointer-events: none.</p>
<p>Try to interrupt a throw in progress it will bug out</p>
<section className={"testSection"}>
<div className={"testSectionInner"}>
<div className={"testItem"} />
<div className={"testItem"} />
<div className={"testItem"} />
<div className={"testItem"} />
<div className={"testItem"} />
</div>
</section>
<div className={"testOverlay"} />
<p>Without overlay.</p>
<p>Try to interrupt a throw in progress it will work as expected</p>
<section className={"testSection"}>
<div className={"testSectionInner"}>
<div className={"testItem"} />
<div className={"testItem"} />
<div className={"testItem"} />
<div className={"testItem"} />
<div className={"testItem"} />
</div>
</section>
</div>
);
}
class App extends React.Component {
render() {
return (
<Main />
);
}
}
// Render it
ReactDOM.render(
<App />,
document.getElementById("root")
);
.App {
font-family: sans-serif;
text-align: center;
}
.testSection {
max-width: 100vw;
}
.testSectionInner {
overflow: scroll hidden;
padding-left: 1.25rem;
display: flex;
flex-flow: row nowrap;
scroll-snap-type: x mandatory;
}
.testItem {
scroll-snap-align: center;
flex: 0 0 calc(81.6591%);
background-color: red;
height: 200px;
margin-right: 4%;
pointer-events: auto;
}
.testOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 300px;
background-color: blue;
opacity: 0.2;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
I am build phone gap web app. I have to upload images from client side using multipart/form-data and backend in nodejs.
This code works well for some mobile phones,but not working for some mobiles especially Samsung Tab 4, HUAWEI.( when open in these devices, on click nothing happens, even same code works well in other devices)
<form id = "uploadForm" enctype = "multipart/form-data" method = "post">
<!--- <img src="../Images/gallery_image.PNG" width="68px" height="auto" id="image_1"/> -->
<div id="image_1" style=" position: relative;
width: 68px;
height: auto;
background-image: url(../Images/gallery_image.PNG);
display: block;
left: 9%;
bottom: 2px;
background-size: cover;">
<input type="file" id="imgInp" name="userPhoto" size="60" accept="image/jpeg, image/png, image/jpg" style=" width: 60px;
height: 67px; opacity: 0;"/><br />
</div>
<input type="submit" value="Gallery" name="submit" id="submit_gallery" class="myButton_00" style="right: 9%;position: relative;top:5px;">
</form>
In sample code html where use the tag details when the html code is read via html viewer in android enviroment doesn't work properly.
The first tag details works fine, but the second tag and son on...doesn't work properly.
The collaps/expande remain always in the content "+".
below the html code
`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0, width=device-width" />
<style>
summary {cursor: pointer; font: bold 1em Arial, Helvetica, sans-serif; padding: 8px 0; position: relative; width: 100%; }
summary::-webkit-details-marker {display: none}
summary:after{background: darkblue; border-radius: 5px; content: "+"; color: #fff; float: left; font-size: 1.5em; font-weight: bold; margin: -5px 10px 0 0; padding: 0; text-align: center; width: 30px;}
details[open] summary:after {content: "-";}
</style>
</head>
<body>
<header>
<details>
<summary>
Sample 1
</summary>
<p>In few simple steps (see below), you can download and perform the registration. sdjsadjaksjdaskjdasddasdasd Incoming and Outgoing Calls are shown and the Error messages are explained.sadiaus sadasdjasdjasl sdadjaskdjaslkdjsajdlaskjdlasjdsajd sdfahjahdj</p>
</details>
<details>
<summary>
Sample 2
</summary>
<p>In few simple steps (see below), you can download and perform the registration. sdjsadjaksjdaskjdasddasdasd Incoming and Outgoing Calls are shown and the Error messages are explained.sadiaus sadasdjasdjasl sdadjaskdjaslkdjsajdlaskjdlasjdsajd sdfahjahdj</p>
</details>
</header>
</body>
</html>`
I have created the project having Listview with default theme. My configuration goes as explained below.
index.html file where all the imports to css, js files are done including cordova-2.0.0.js and other stuffs that are needed. Index.html file contains my Login Page.
Now, After login I go to home.html page where i have list view configured as below :
<div data-role="header" data-theme="b">
<h1>Home Screen</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-theme="c">
<li><img src="images/profile.png" alt="Profile">My Profile</li>
<li><img src="images/courses.jpg" width="189" height="189" alt="Courses">My Courses</li>
<li><img src="images/contact.jpg" width="160" height="160" alt="Contacts">My Contacts</li>
<li><img src="images/map.png" width="215" height="215" alt="Map">My Map</li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<h4>© 2012.</h4>
</div>
Note that I have not included the header file here. and only this much code is there in home.html file. (Note here since it is HTML i am not able show my Parent div tag where i have configured data-role="page")
Now, all the themes are getting applied only the arrow is not coming instead a Gray Spot is coming as in below Pic.
Can any one explain why it goes like this?? I have checked the other project and I have all the imports as it is.
Below is my index.html imports :
<link rel="stylesheet" href="styles/custom.css" />
<link rel="stylesheet" href="styles/jquery.mobile-1.2.0.min.css" />
<script src="js/jquery-1.8.3.min.js"></script>
<!-- <script src="js/jquery-mobile-1.2.0.min.js"></script> -->
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.0.0.js"></script>
EDIT
my CSS custom.css goes as below
/* CSS Document */
#container0 {
width: 100%;
height: 100%;
position: relative;
overflow-x:hidden;
border: 1px solid black;
}
#div0 {
width: 100%;
height: 100%;
position: absolute;
}
#div1 {
width: 100%;
position: absolute;
left: 100%;
height: 100%;
}
/*#footer {
margin-top:'10px';
}*/
button {
display:block;
text-align:center;
margin:0 auto;
width:100%;
height:2em;
}
.loginBtn {
width:100%;
}
.info {
border:1px solid black;
background:#eeeeff;
margin:5px;
padding:5px;
}
/* Map CSS Start */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
width:520px;
height: 900px;
}
/*#media print {*/
#media all and (orientation: landscape) {
html, body {
height: auto;
}
#map_canvas {
width: 950px;
height: 480px;
}
}
/* Map CSS End */
.ui-content h2 {
text-align:left;
padding:0px;
padding-left:10px;
margin-bottom:10px;
}
.ui-content h4 {
padding: 0px;
padding-left:10px;
margin-bottom: 5px;
}
Use above jquery files on proper places and try this after anchor tag
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
Try with this:
<link rel="stylesheet" href="custom.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
EDIT :
I got it solved for local jquery.mobile-1.2.0.min.css file.
First copy this image from this link Arrow Icon
You will get image named icons-18-white.png.
Save this image into www/images/icons-18-white.png path.
That's it.
It works for me.
Thanks.
I have an Android app using webview to load and display html pages.
But when a new page has just been loaded into the webview, there is sometimes a element which is already hovered. For example the element with id "imhovered" is already hovered and has the blue background of the div (see code below). This happens quite randomly depending on the element structure of the current page and the position of the touch from the user in the previous page.
html code:
<body>
<a href="link1" class="menu">
<div class="qlink">here is div1</div>
</a>
<a href="link2" class="menu">
<div class="qlink"> here is div2 </div>
</a>
<a id="imhovered" href="link3" class="menu">
<div class="qlink">here is div3</div>
</a>
</body>
and the styles:
.menu {
color: red;
text-decoration:none;
font-family:sans-serif;
font-size: 28px;
}
.menu:hover {
color: red;
background-color: green;
}
.qlink {
padding-left: 84px;
padding-top: 24px;
padding-bottom: 20px;
background: url(aaa.png) no-repeat scroll 28px 0px;
}
.qlink:hover {
background-color:blue;
}
My question is how to remove this wrong hovered state of the element ?
I have tried to find a solution for a while with researching and own experimenting but still have no success. Following are what i find out during my experiments:
webview.clearFocus() -> not work
javascript/jquery when dom is ready:
$(document).ready(function () {
alert($("*:hover").attr("id"));--> result:undefined
alert($("*:active").attr("id")); --> result:undefined
alert($("*:focus").attr("id")); --> result:undefined
});
this means that when the dom is ready, there is no focused or hovered element.
javascript/jquery in body onload (when page is loaded):
alert($("*:hover").attr("id")); --> result:imhovered
alert($("*:active").attr("id")); --> result:undefined
alert($("*:focus").attr("id")); --> result:undefined
this means that the hovered state has just appeared now as the page has just been loaded. Is it now too late to do any style modification because the wrong hovered background is already displayed? Is it a bug of webkit/android? I hope you guys can give me any advice to solve this. Thanks in advance!
i finally find out that when the loading process is quick enough, user will not see the style modification, so i do the following style modification and it solves my problem:
window.onload =
function() {
var imhovered = $("*:hover");
var children = imhovered.children();
children.removeClass("qlink").addClass("qlinkNoHover");
imhovered.bind('touchstart touchend', function() {
$(this).children().toggleClass('qlinkFixHovered');
});
}
.qlinkNoHover {
background-color:transparent;
padding-left: 84px;
padding-top: 24px;
padding-bottom: 20px;
background: url(aaa.png) no-repeat scroll 28px 0px;
}
.qlinkFixHovered {
background-color:blue !important;
}
i hope this could help someone who has the same problem.