android - 在大屏幕计算机上全屏显示，宽度超过最大宽度，出现灰色背景

看下面的图片，＃myshop div最大宽度为1200px，当我使用非常屏幕的计算机时，它看起来如下。我该如何解决，我唯一无法更改的是无法更改#myshop的最大宽度，因此如何使它在大屏幕计算机上看起来不错。在小型计算机中，笔记本电脑可以。感激

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" <?php language_attributes(); ?>> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html <?php language_attributes(); ?>> <!--<![endif]-->
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<title><?php wp_title('|', true, 'right'); ?></title>

	<?php wp_head(); ?>


	<!--[if lt IE 9]><script src="<?php echo THEMEASSETS; ?>js/ie8-responsive-file-warning.js"></script><![endif]-->
	<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

	<div id="top_head">
		<a href="http://sayhitoworld.spreadshirt.com/shop/help/index/" id="top_help">Help?</a>
		<div id="checkout_top" class="spreadplugin-checkout"><a target="_self">Shopping bag</a>(<span></span>)</div>
<a id="track_order" href="https://sayhitoworld.spreadshirt.com/shop/logon">Track Order</a>
</div><!--top_head-->


</head>
<body <?php body_class(); ?>>

	<?php if(function_exists('WC')): ?>
		<?php get_template_part('tpls/header-cart'); ?>
	<?php endif; ?>

	<?php if( ! defined("NO_HEADER_MENU")): ?>
	<div class="wrapper">

		<?php

		define("HAS_SLIDER", in_array('revslider/revslider.php', apply_filters('active_plugins', get_option( 'active_plugins'))) && function_exists("register_field_group") && ($revslider_id = get_field('revslider_id')));

		# Menu
		if(HEADER_TYPE == 1)
		{
			get_sidebar('menu');
		}
		else
		if(in_array(HEADER_TYPE, array(2,3,4)))
		{
			get_sidebar('menu-top');

			# Slider
			if(HAS_SLIDER)
			{
				if(is_search())
					echo "<div style='height: 30px;'></div>";
				else
					echo putRevSlider($revslider_id);
			}
		}
		?>

		<div class="main<?php echo HEADER_TYPE == 1 && HAS_SLIDER ? ' hide-breadcrumb' : ''; ?>">

			<?php get_template_part('tpls/breadcrumb'); ?>

			<?php
			# Slider
			if(HEADER_TYPE == 1 && HAS_SLIDER):

				?>
				<div class="rev-slider-container row">
					<?php echo putRevSlider($revslider_id); ?>
				</div>
				<?php

			endif;
			?>

	<?php endif; ?>

<div class="page-container">

	<?php if($is_vc_page === false): ?>
		<div class="col-md-12">
			<div class="white-block block-pad">
				<h1 class="single-page-title"><?php echo the_title(); ?></h1>

				<div class="post-content">
					<?php the_content(); ?>
				</div>

			</div>
		</div>
	<?php else: ?>
		<?php the_content(); ?>
	<?php endif; ?>

		<div id="myshop_wrap">
		<div id='top_basket'></div>
		<div id="myshop"></div>
	</div>


		<script>
		    var spread_shop_config= {
		        "shopName" : "hitoworld",
		        "locale" : "us_US",
		        "prefix" : "//shop.spreadshirt.com",
		        "baseId" : "myshop"
		 };
		</script>
		<script type="text/javascript" src="//shop.spreadshirt.com/shopfiles/shopclient/shopclient.nocache.js"></script>


</div><!--page-container-->

最佳答案

创建另一个媒体查询，并将最小宽度设置为1201px

在查询中以及容器左右两边（左右）的间距（以百分比表示）。但是如果没有您的代码，我将无法为您提供示例。如果您共享代码，我将用示例进行更新。

关于android - 在大屏幕计算机上全屏显示，宽度超过最大宽度，出现灰色背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30903898/